一、準備工作
由於項目基於vue，所以需要有node環境可以啟動。本地先安裝好node環境，如果你還不知道怎麼安裝，可以自行百度谷歌。
二、程序實現
目錄結構
/dist 目錄為打包後的代碼，可以直接放到你的本地服務器即可訪問。
/src 目錄為項目源碼。可以看css3如何寫出下面的這些形狀的。
/components/heart.vue 為css3實現愛心的組件一顆愛心，我們使用兩個圓角的div 90°交叉，再通過一個div填補愛心下方的尖角。CSS3 transform: rotate(-45deg) 來旋轉div進行交叉
<template>
<style>
.heart{
position: relative;
width: 40px;
height: 40px;
}
.heart-circular{
position: absolute;
width: 20px;
height: 30px;
border-radius: 10px;
background: red;
}
.heart-circular.left{
left: 3px;
transform: rotate(-45deg);
}
.heart-circular.right{
left: 15px;
transform: rotate(45deg);
}
.heart-square{
position: absolute;
left: 10px;
top: 14px;
width: 18px;
height: 17px;
background: red;
transform: rotate(45deg);
}
/components/index.vue 為css3實現首頁手牽手的組件，手牽手的比較不好實現，手指的還原度不夠逼真。主要是通過每個小的div做為一根手指，再進行定位和旋轉。旋轉用到的屬性也是 transform: rotate(-15deg)
/components/man.vue 為css3實現男人送花的組件。送花的動作需要用到 CSS3 裡的動畫 animation 屬性給男人的胳膊的div加上動畫，抬起胳膊表示送花
.body .arm.left:before{
left: 21px;
top: 26px;
border-right: 1px solid #ccc;
border-top-left-radius:10px;
transform: rotate(-60deg);
animation: arm-up 4s ease;
}
@keyframes arm-up {
0%,75%{
left: 13px;
top: 34px;
transform: rotate(-30deg);
}
100%{
left: 21px;
top: 26px;
transform: rotate(-60deg);
}
}
animation: arm-up 4s ease 中的 arm-up 表示自定義的動畫名稱對應 @keyframes ，4s則是整個動畫的時間，從抬起到放下，ease 則是動畫過渡效果。
/components/rose.vue 為css3實現花的組件
<template>
<style>
.rose{
position: relative;
}
.rose .petal{
position: absolute;
left: 10px;
top: 20px;
width: 20px;
height: 20px;
background: #fd2d2d;
border-radius: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: -1px -1px 5px #d42a2a inset;
}
.rose .petal:before,.rose .petal:after{
content: '';
position: absolute;
top: -2px;
width: 10px;
height: 10px;
border-radius: 5px;
background: #fd2d2d;
}
.rose .petal:before{
left: 0;
}
.rose .petal:after{
right: 0;
}
.rose .leaf:before,.rose .leaf:after{
content: '';
position: absolute;
width: 15px;
height: 4px;
background:#15b115;
}
.rose .leaf:before{
left: 5px;
top: 59px;
transform: rotate(45deg) skew(74deg);
}
.rose .leaf:after{
left: 21px;
top: 51px;
transform: rotate(-45deg) skew(-74deg);
}
.rose .stem{
position: absolute;
left: 18px;
top: 39px;
width: 4px;
height: 50px;
background: #15b115;
box-shadow: 0 -1px 1px green inset;
}
花朵的葉子，用到 CSS3 屬性中的傾斜，相對用得比較少的一個轉換。transform: skew(-74deg)，定義沿著 X 和 Y 軸的 2D 傾斜轉換。
/components/sky.vue 為css3實現夜晚天空包括星星月亮和流星的組件夜空中的星星的定位，你不可能把每個星星的樣式都寫一遍，這樣太浪費時間了。因此我們使用 sass 通過循環遍歷每個星星，再給個隨機的定位，會更加的逼真。星星一閃一閃的效果，依舊要使用到動畫 animation
.star{
span{
content: '';
position: absolute;
width: 1px;
height: 1px;
background: #FEFED1;
border-radius: 50%;
opacity: .8;
}
@for $i from 1 to 40{
span:nth-child(#{$i}){
left: random()*100%;
top: random()*300px;
animation: star-#{$i%2} 5s ease #{$i/4}s infinite;
}
}
}
/components/time.vue 為css3實現紀念四週年也就是相戀功多少天的組件
/components/windmill.vue 為css3實現風車的組件
<template>
風車的葉片旋轉，很明顯也是用到了 CSS3 的旋轉，只要通過寫好div，再使用動畫進行無限的旋轉，就達到了風車在動的效果了。
@keyframes rotate {
from {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
to {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
}
三、運行效果
我自己是一名從事了多年開發的前端老程序員，，整理了一份最適合今年學習的前端學習乾貨，從最基礎到高級的各種框架都有整理，送給每一位前端小夥伴，想要獲取的可以關注我的頭條號並在後臺私信我：前端，即可免費獲取。
閱讀更多 web小學員 的文章
