犹豫了好久，在考虑说要自己搭建一个博客平台，还是在博客园里面注册个账号来跟大家做一些前端技术的分享，后来因为种种原因，也希望在博客园这个大家庭中能够跟大家互相探讨，于是便有了灿爷的前端之路
好了，废话不多说，撸起袖子开干
今天的主题是奔跑的小羊，主要御用css3的动画实现小羊的奔跑，知识点简单，但是好玩，纯属娱乐，希望大家喜欢
首先先实现一只小羊原地踏步的效果，如下
1 .sheep { 2 width: 162.75px; 3 height: 122px; 4 margin: 100px auto; 5 background: pink; 6 background-image: url('./images/sheep.png'); 7 background-repeat: no-repeat; 8 animation: run 1s steps(7) infinite; 9 } 10 @keyframes run { 11 0% { 12 background-position: 0 0; 13 } 14 100% { 15 background-position: 100% 0; 16 } 17 }
接着要实现小羊从右往走奔跑移动，这个时候我们就要再建立一个动画 run2，代码如下
1 .box { 2 position: relative; 3 overflow: hidden; 4 width: 900px; 5 height: 400px; 6 margin: 100px auto; 7 background-color: #2090c0 8 } 9 .sheep { 10 position: absolute; 11 right: -164px; 12 width: 162.75px; 13 height: 122px; 14 margin: auto; 15 background-image: url('./images/sheep.png'); 16 background-repeat: no-repeat; 17 animation: run 1s steps(7) infinite, 18 run2 5s linear infinite; 19 } 20 @keyframes run { 21 0% { 22 background-position: 0 0; 23 right: -164px 24 } 25 100% { 26 background-position: 100% 0; 27 right: 900px 28 } 29 } 30 @keyframes run2 { 31 0% { 32 right: -164px 33 } 34 100% { 35 right: 900px 36 } 37 }
效果如下
好了，大差不差了，最终奔跑的小羊demo已经完成，接下去附上完整代码
<!doctype html><!--声明文档类型:html--> <html><!--超文本标记语言 根目录节点标签--> <head><!--头部:给浏览器看的--> <meta charset="utf-8"><!--字符编码:国际编码--> <!--网页三要素 标题 关键词 描述--> <title>动画-奔跑的小羊</title> <meta name="description" content="描述:对网页文档的大概的介绍"> <!--关键词:提供给搜索引擎搜索网站使用--> <meta name="keywords" content="跑跑,小杨"> <style> *{ margin:0; padding:0; } .box { position: relative; overflow: hidden; width: 900px; height: 400px; margin: 100px auto; background-color: #2090c0 } .sheep { position: absolute; right: -164px; width: 162.75px; height: 122px; margin: auto; background-image: url('./images/sheep.png'); background-repeat: no-repeat; animation: run 1s steps(7) infinite, run2 5s linear infinite; } .sheep:nth-child(2) { margin: 130px auto 0; animation: run 1s steps(7) infinite, run2 4s linear infinite; } .sheep:nth-child(3) { margin: 260px auto 0; animation: run 1s steps(7) infinite, run2 3s linear infinite; } @keyframes run { 0% { background-position: 0 0; right: -164px } 100% { background-position: 100% 0; right: 900px } } @keyframes run2 { 0% { right: -164px } 100% { right: 900px } } </style> </head> <body> <div class="box"> <div class="sheep"></div> <div class="sheep"></div> <div class="sheep"></div> </div> </body> </html>
