学号后四位:(必填)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是变量名,自定义名称)。