前端程序员用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>

完成

说实话，我感觉叶子飘落的速度不大对头，牛顿的棺材板可能压不住了）_（