前端程序員用css動畫給女朋友一個驚喜

成品

具體步驟

1： 在百度上隨便找一張喜歡的圖片，最好是愛心樹的樣子。
2： 利用ps軟件，摳圖扣出其中的一片葉子

3： 然後寫代碼，將愛心樹設置爲頁面背景

*{
	margin: 0;
	padding: 0;
}
		
div
{
	width: 100%;
	height: 1000px;
	background-image:url(img/tree.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	/* position:relative; */
	
}

3： 畫五片葉子，設置葉子的position位置屬性以便進行圖片定位及接下來的變換

<div>
			<img src="img/leaf.png" alt="leaf" class="img1" />
			<img src="img/leaf.png" alt="leaf" class="img2" />
			<img src="img/leaf.png" alt="leaf" class="img3" />
			<img src="img/leaf.png" alt="leaf" class="img4" />
			<img src="img/leaf.png" alt="leaf" class="img5" />
			
</div>

.img1{
	position:relative;
}
.img2{
	position:relative;
}
.img3{
	position:relative;
}
.img4{
	position:relative;
}
.img5{
	position:relative;
}

4： 給葉子圖片設置animation屬性，以便進行樹葉變換，設置屬性值，產生延遲，防止出現同時飄落的現象。

.img1{
	position:relative;
	-webkit-animation: myfirst 3s linear 0s infinite none;/*alternate*/
}
.img2{
	position:relative;
	-webkit-animation: myfirst1 5s linear 0s infinite none;
}
.img3{
	position:relative;
	-webkit-animation: myfirst2 4s linear 0s infinite none;
}
.img4{
	position:relative;
	-webkit-animation: myfirst3 6s linear 0s infinite none;
}
.img5{
	position:relative;
	-webkit-animation: myfirst4 5s linear 0s infinite none;
}

5： animation的動畫設置，讓每一片葉子飄的方向，速度不同。

@-webkit-keyframes myfirst /* Safari 與 Chrome */
{
    0% {left: 1000px;top: 500px;}
    100% {left: 400px;top: 900px;}
}

@-webkit-keyframes myfirst1 /* Safari 與 Chrome */
{
    0% {left: 1000px;top: 500px;}
	50%{left: 1400px;top: 700px;-webkit-transform: rotate(180deg);}
    100% {left: 1200px;top: 900px;}
}

@-webkit-keyframes myfirst2 /* Safari 與 Chrome */
{
  0% {left: 1300px;top: 600px;}
  50%{left: 900px;top: 800px;-webkit-transform: rotate(90deg);}
  100% {left: 1200px;top: 900px;}
}

@-webkit-keyframes myfirst3 /* Safari 與 Chrome */
{
   0% {left: 1100px;top: 200px;}
   25%{left: 1200px;top: 300px;-webkit-transform: rotate(280deg);}
   100% {left: 200px;top: 400px;}
}
@-webkit-keyframes myfirst4 /* Safari 與 Chrome */
{
    0% {left: 1000px;top: 500px;}
	35% {left: 600px;top: 400px;-webkit-transform: rotate(80deg);}
	75% {left: 800px;top: 700px;-webkit-transform: rotate(80deg);}
    100% {left: 400px;top: 900px;}
}

6： audio設置背景音樂，這會在頁面上顯示默認的音樂播放器，需要你點擊手動播放。如果你隱藏audio組件，它也不會自動播放。

	<audio controls="controls" autoplay="autoplay" loop="-1" style="float: left;">
		<source src="music/loveperhapsbad.mp3" type="audio/mp3"/>
	</audio>

完成

說實話，我感覺葉子飄落的速度不大對頭，牛頓的棺材板可能壓不住了）_（