html+css3应用animation制作动画效果(跳动的熊)
所需素材animationxhtml,css代码所需素材
素材:
animationx
1.是css3新增的属性,由于动画效果
2.动画是使元素从一种样式逐渐变化为另一种样式的效果。
3.可以改变任意多的样式任意多的次数。
4.用关键词 "from"是开始 和 "to"是结束或 0%是的开始,100% 是的完成。。
html,css代码
/*css代码*/<style>* {margin: 0;padding: 0;}/* 背景颜色 */body {background-color: #ccc;}.bear {/* 图片可见宽高 */width: 200px;height: 100px;/* url添加图片,no-repeat让图片不平铺 */background: url(images/bear.png) no-repeat;/* animation动画属性设置:bear是绑定到选择器的 keyframe 名称,.4s为动画完成一个动作的时间,steps(8)把动画分为8部分运行,infinite无限播放逗号分隔可以写多个 */animation: bear .4s steps(8) infinite, mo 1s forwards;margin: auto;}@keyframes bear {/* 起始图片位置为0,0 */0% {background-position: 0 0;}/*动画完成一次循环到最后图片位置为-1600px,0 */100% {background-position: -1600px 0;}}@keyframes mo {0% {left: 0;}100% {left: 50%;}}</style>/* html代码*/<div class="bear"></div>
以上是html+css3应用animation制作动画效果(跳动的熊)的代码,如果有什么不懂的可以评论或者私聊我,我为你解答,若是发现有错误,请指出谢谢,希望你们年薪过百万。