学号后四位:(必填)0227
邀请人ID:(非必填)
这篇文章将用html与css代码来实现一个有趣的桃子动图。
项目名称及描述
名称:晃动的桃子树
以树为背景,设定六个左右摇晃的桃子动画。该项目将用到html与css方面的知识。
HTML部分
摇晃的桃子动图HTML代码部分
<body>
<div class="outer">
<div class="bg">
<p>摇晃的桃子</p>
<span class="peach peach1 shake1"></span>
<span class="peach peach2 shake2"></span>
<span class="peach peach3 shake3"></span>
<span class="peach peach4 shake4"></span>
<span class="peach peach5 shake5"></span>
<span class="peach peach6 shake6"></span>
</span>
</div>
</div>
</body>
将代码写在div块中,以便我们对桃子进行设计。这里用了两个div块,一个用以背景,一个用以桃子设计。每个桃子用动画<span>标签,设定三个class属性,用以位置,动画的css设计。
接下来是css代码部分。
CSS代码
这段代码冗长,但是直观,便于理解。
<style type="text/css">
.outer{
margin: 0 auto;
min-width: 1000px;
overflow: hidden;
}
.bg{
width: 1146px;
height: 631px;
background-image: url(img/bg.jpg);
margin: 0 auto;
position: relative;
}
p{
font-size: 40px;
position: absolute;
left: 180px;
top: 90px;
}
.peach{
width: 90px;
height: 100px;
position: absolute;
background: url(img/peach.png) no-repeat 0 0;
}
.peach1{
top: 250px;
left: 340px;
background-position: 0 0;
}
.peach2{
top: 250px;
left: 621px;
background-position: 0 0;
}
.peach3{
top: 380px;
left: 707px;
background-position: 0 0;
}
.peach4{
top: 190px;
left: 520px;
background-position: 0 0;
}
.peach5{
top: 300px;
left: 900px;
background-position: 0 0;
}
.peach6{
top: 190px;
left: 735px;
background-position: 0 0;
}
@keyframes snake{
0%{
transform: rotate(2deg);
transform-origin: 50% 0;
}
20%{
transform: rotate(10deg);
transform-origin: 50% 0;
}
40%{
transform: rotate(0 deg);
transform-origin: 50% 0;
}
60%{
transform: rotate(-4deg);
transform-origin: 50% 0;
}
80%{
transform: rotate(-10deg);
transform-origin: 50% 0;
}
100%{
transform: rotate(-2deg);
transform-origin: 50% 0;
}
}
.shake1{
animation: snake 1.5s ease-in-out infinite;
}
.shake2{
animation: snake 1.6s ease-in-out infinite;
}
.shake3{
animation: snake 1.7s ease-in-out infinite;
}
.shake4{
animation: snake 1.8s ease-in-out infinite;
}
.shake5{
animation: snake 2s ease-in-out infinite;
}
.shake6{
animation: snake 2s ease-in-out infinite;
}
</style>
CSS实现思路
父级div只用于设定背景属性。子级中加入桃子图片,对每个class进行设计。我拿class="peach peach1 shake1"这段举例。peach用以导入之后所需的所有桃子序列图。提前设定好大小定位样式,这样一来方便了每个桃子的单独设定。peach1用以设定每个桃子相对于父级的位置。而接下来就是css代码的关键点:自定义动画。
@keyframes snake 自定义动画
@keyframes snake{
0%{
transform: rotate(2deg);
transform-origin: 50% 0;
}
20%{
transform: rotate(10deg);
transform-origin: 50% 0;
}
40%{
transform: rotate(0 deg);
transform-origin: 50% 0;
}
60%{
transform: rotate(-4deg);
transform-origin: 50% 0;
}
80%{
transform: rotate(-10deg);
transform-origin: 50% 0;
}
100%{
transform: rotate(-2deg);
transform-origin: 50% 0;
}
}
自定义动画以
@keyframes name{
from{}
to{}
}
此为基础框架,我们可以对动画开始到结束进行相当详细的设置。这里采用的是百分式动画节点,以便设置桃子每一个节点的动画。其具体设置可参考上面的代码段。
当我们完成自定义动画设置以后,使用animation: + name 进行调用便可。(name是变量名,自定义名称)。