成品
具体步骤
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>
完成
说实话,我感觉叶子飘落的速度不大对头,牛顿的棺材板可能压不住了)_(