博客园第一篇随笔---css3动画(奔跑的小杨)
2018-08-17 09:33:39来源:博客园 阅读 ()
犹豫了好久,在考虑说要自己搭建一个博客平台,还是在博客园里面注册个账号来跟大家做一些前端技术的分享,后来因为种种原因,也希望在博客园这个大家庭中能够跟大家互相探讨,于是便有了灿爷的前端之路
好了,废话不多说,撸起袖子开干
今天的主题是奔跑的小羊,主要御用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>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
下一篇:PC QQ客服代码
- 博客园页面美化源代码 2020-06-04
- 如何在博客园添加自己的头像 2020-05-27
- 美化博客园样式 2020-05-17
- 2020前端练习 —— 超级无敌简易版博客园 2020-05-14
- 第一篇:前端开发-css元素类型详解 2020-04-02
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash