分享一个纯css制作的动画化,在网页(手机)载入等的时候能够引用!
2017-07-19 10:06
686 查看
CSS代码例如以下:
效果如图:看来博客不能引用jsfiddle
![](http://img.blog.csdn.net/20140625103440265?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY29uZmlkZW5jZTY4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
查看demo
/* Custom Stylesheet */ body, html { margin: 0; -webkit-font-smoothing: antialiased; background: #68ABAD; text-align: center; } /* DEMO 1 */ .loader1 { margin: 0 auto; height: 20px; width: 20px; position:relative; -webkit-animation:spin 1.5s linear infinite; -moz-animation:spin 1.5s linear infinite; } .loader1 i{ height: 20px; width: 20px; border-radius: 25px; display: block; position:absolute; } .loader1 i:before, .loader1 i:after{ content:''; display:block; position:absolute; height:inherit; width:inherit; border-radius: inherit; } .loader1 i:first-child:before { background:rgba(52, 149, 221, 0.9); -webkit-animation:rotate-top-left 1.5s linear infinite; -moz-animation:rotate-top-left 1.5s linear infinite; } .loader1 i:first-child:after { background:rgba(225, 73, 44, 0.9); -webkit-animation:rotate-top-right 1.5s linear infinite; -moz-animation:rotate-top-right 1.5s linear infinite; } .loader1 i:last-child:before { background:rgba(249, 206, 43, 0.9); -webkit-animation:rotate-bottom-left 1.5s linear infinite; -moz-animation:rotate-bottom-left 1.5s linear infinite; } .loader1 i:last-child:after { background:rgba(0, 153, 117, 0.9); -webkit-animation:rotate-bottom-right 1.5s linear infinite; -moz-animation:rotate-bottom-right 1.5s linear infinite; } @-webkit-keyframes spin{ 0%{ -webkit-transform:rotate(0deg); } 50%{ -webkit-transform:rotate(-180deg); } 100%{ -webkit-transform:rotate(-360deg); } } @-webkit-keyframes rotate-top-right{ 0%{ -webkit-transform:rotate(0deg); } 50%{ -webkit-transform:rotate(-180deg); -webkit-transform-origin: 20% 20%; } 100%{ -webkit-transform:rotate(-360deg); } } @-webkit-keyframes rotate-top-left{ 0%{ -webkit-transform:rotate(0deg); } 50%{ -webkit-transform:rotate(180deg); -webkit-transform-origin: 80% 20%; } 100%{ -webkit-transform:rotate(360deg); } } @-webkit-keyframes rotate-bottom-right{ 0%{ -webkit-transform:rotate(0deg); } 50%{ -webkit-transform:rotate(-180deg); -webkit-transform-origin: 80% 80%; } 100%{ -webkit-transform:rotate(-360deg); } } @-webkit-keyframes rotate-bottom-left{ 0%{ -webkit-transform:rotate(0deg); } 50%{ -webkit-transform:rotate(180deg); -webkit-transform-origin: 20% 80%; } 100%{ -webkit-transform:rotate(360deg); } } @-moz-keyframes spin{ 0%{ -moz-transform:rotate(0deg); } 50%{ -moz-transform:rotate(-180deg); } 100%{ -moz-transform:rotate(-360deg); } } @-moz-keyframes rotate-top-right{ 0%{ -moz-transform:rotate(0deg); } 50%{ -moz-transform:rotate(-180deg); -moz-transform-origin: 20% 20%; } 100%{ -moz-transform:rotate(-360deg); } } @-moz-keyframes rotate-top-left{ 0%{ -moz-transform:rotate(0deg); } 50%{ -moz-transform:rotate(180deg); -moz-transform-origin: 80% 20%; } 100%{ -moz-transform:rotate(360deg); } } @-moz-keyframes rotate-bottom-right{ 0%{ -moz-transform:rotate(0deg); } 50%{ -moz-transform:rotate(-180deg); -moz-transform-origin: 80% 80%; } 100%{ -moz-transform:rotate(-360deg); } } @-moz-keyframes rotate-bottom-left{ 0%{ -moz-transform:rotate(0deg); } 50%{ -moz-transform:rotate(180deg); -moz-transform-origin: 20% 80%; } 100%{ -moz-transform:rotate(360deg); } } /* DEMO 2 */ .loader2 { margin: 0 auto; position:relative; width: 100px; height: 100px; } .loader2 i { border-style:solid; display:inline-block; box-sizing:border-box; -moz-box-sizing:border-box; border-width:50px; border-color:rgba(255,255,255,1); border-radius: 50px; -moz-animation:blink 1.5s infinite ease-in-out; -webkit-animation:blink 1.5s infinite ease-in-out; height: 100px; width: 100px; } @-webkit-keyframes blink{ 50%{ border-width:0; border-color:rgba(255,255,255,0.5); } 100%{ border-width:0; border-color:rgba(255,255,255,0.5); } } @-moz-keyframes blink{ 50%{ border-width:0; border-color:rgba(255,255,255,0.5); } 100%{ border-width:0; border-color:rgba(255,255,255,0.5); } } /* DEMO 3 */ .loader3 { margin: 0 auto; position:relative; width: 50px; height: 50px; -webkit-animation:spin 4s infinite ease; -moz-animation:spin 4s infinite ease; } .loader3 i { border-style:solid; display:inline-block; box-sizing: border-box; -moz-box-sizing: border-box; border:2px dashed rgba(0,0,0,0.7); border-radius: 50px; -webkit-animation:scale 4s infinite linear; -moz-animation:scale 4s infinite linear; height: 50px; width: 50px; } @-webkit-keyframes spin{ 0%{ -webkit-transform:rotate(0deg); } 25%{ -webkit-transform:rotate(90deg); } 50%{ -webkit-transform:rotate(-90deg); } 75%{ -webkit-transform:rotate(180deg); } 100%{ -webkit-transform:rotate(-180deg); } } @-webkit-keyframes scale{ 0%{ -webkit-transform:scale(1); } 25%{ -webkit-transform:scale(0.5); } 50%{ -webkit-transform:scale(1); } 75%{ -webkit-transform:scale(0.5); } 100%{ -webkit-transform:scale(1); } } @-moz-keyframes spin{ 0%{ -moz-transform:rotate(0deg); } 25%{ -moz-transform:rotate(90deg); } 50%{ -moz-transform:rotate(-90deg); } 75%{ -moz-transform:rotate(180deg); } 100%{ -moz-transform:rotate(-180deg); } } @-moz-keyframes scale{ 0%{ -moz-transform:scale(1); } 25%{ -moz-transform:scale(0.5); } 50%{ -moz-transform:scale(1); } 75%{ -moz-transform:scale(0.5); } 100%{ -moz-transform:scale(1); } } /* DEMO 4 */ .loader4 { margin: 0 auto; position:relative; text-align: center; border-bottom: 70px solid rgba(255,255,255,0.5); border-left: 10px solid transparent; border-right: 10px solid transparent; height: 0; width: 20px } .loader4:before{ content:''; top: -15px; left: -28px; display:block; position:absolute; height:70px; width:70px; border-radius: 50px; border: 5px dashed rgba(255,255,255,0.5); -webkit-animation:wind .25s linear infinite; -moz-animation:wind .25s linear infinite; } .loader4 i{ height: 40px; width: 5px; margin-left: -1.5px; display: inline-block; position:absolute; -webkit-animation:spin 1.5s linear infinite; -moz-animation:spin 1.5s linear infinite; } .loader4 i:before, .loader4 i:after{ content:''; display:block; position:absolute; height:inherit; width:inherit; border-radius: inherit; background: white; } .loader4 i:first-child:before { top: -53%; -webkit-transform:rotate(-45deg); -webkit-transform-origin: 100% 100%; -moz-transform:rotate(-45deg); -moz-transform-origin: 100% 100%; } .loader4 i:first-child:after { top: -53%; -webkit-transform-origin: 0 100%; -webkit-transform:rotate(45deg); -moz-transform-origin: 0 100%; -moz-transform:rotate(45deg); } .loader4 i:last-child:before { top: 45%; -webkit-transform-origin: 100% 0; -webkit-transform:rotate(-45deg); -moz-transform-origin: 100% 0; -moz-transform:rotate(-45deg); } .loader4 i:last-child:after { -webkit-transform-origin: 0 0; -webkit-transform: rotate(45deg); -moz-transform-origin: 0 0; -moz-transform: rotate(45deg); top: 45%; } @-webkit-keyframes spin{ 0%{ -webkit-transform:rotate(0deg); } 50%{ -webkit-transform:rotate(-180deg); } 100%{ -webkit-transform:rotate(-360deg); } } @-webkit-keyframes wind{ 100%{ -webkit-transform:scale(2); border-width: 0; } } @-moz-keyframes spin{ 0%{ -moz-transform:rotate(0deg); } 50%{ -moz-transform:rotate(-180deg); } 100%{ -moz-transform:rotate(-360deg); } } @-moz-keyframes wind{ 100%{ -moz-transform:scale(2); border-width: 0; } } /* DEMO 5 */ .solar { margin: 250px auto 350px; height: 50px; width: 50px; background: orange; border-radius: 25px; position:relative; -webkit-animation:glow 1.5s linear infinite; -moz-animation:glow 1.5s linear infinite; } .solar i{ border-radius: 250px; display:block; position:absolute; border: 1px solid rgba(255,255,255, 0.15); box-sizing: border-box; -moz-box-sizing: border-box; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; } .solar i:before { content:''; border-radius: 25px; background: black; display: block; position:absolute; top: -5px; right: 45%; } .solar i.mercury { width: 80px; height: 80px; margin-left: -40px; left: 50%; top: 50%; margin-top: -40px; -webkit-animation:orbit .5s linear infinite; -moz-animation:orbit .5s linear infinite; } .solar i.mercury:before { background: #6F5F5F; height: 7px; width: 7px; } .solar i.venus { width: 110px; height: 110px; margin-left: -55px; left: 50%; top: 50%; margin-top: -55px; -webkit-animation:orbit 1s linear infinite; -moz-animation:orbit 1s linear infinite; } .solar i.venus:before { background: #E7A71F; height: 10px; width: 10px; } .solar i.earth { width: 140px; height: 140px; margin-left: -70px; left: 50%; top: 50%; margin-top: -70px; -webkit-animation:orbit 1.5s linear infinite; -moz-animation:orbit 1.5s linear infinite; } .solar i.earth:before { background: #63BEE2; height: 10px; width: 10px; } .solar i.mars { width: 170px; height: 170px; margin-left: -85px; left: 50%; top: 50%; margin-top: -85px; -webkit-animation:orbit 2s linear infinite; -moz-animation:orbit 2s linear infinite; } .solar i.mars:before { background: red; height: 10px; width: 10px; } .solar i.belt { box-sizing: border-box; -moz-box-sizing: border-box; border-width: 25px; width: 240px; height: 240px; margin-left: -120px; border-color: rgba(36, 35, 35, 0.21); left: 50%; top: 50%; margin-top: -120px; } .solar i.jupiter { width: 260px; height: 260px; margin-left: -130px; left: 50%; top: 50%; margin-top: -130px; -webkit-animation:orbit 2.5s linear infinite; -moz-animation:orbit 2.5s linear infinite; } .solar i.jupiter:before { background: #CF9B2B; top: -15px; height: 30px; width: 30px; } .solar i.saturn { width: 320px; height: 320px; margin-left: -160px; left: 50%; top: 50%; margin-top: -160px; -webkit-animation:orbit 3s linear infinite; -moz-animation:orbit 3s linear infinite; } .solar i.saturn:before { background: #CF7A2B; top: -10px; height: 20px; width: 20px; } .solar i.saturn:after { background: #fff; width: 30px; height: 1px; content: ''; position: absolute; display: block; background: #FFF; width: 30px; height: 1px; content: ''; right: 43.5%; -webkit-transform:rotate(20deg); -moz-transform:rotate(20deg); } .solar i.uranus { width: 360px; height: 360px; margin-left: -180px; left: 50%; top: 50%; margin-top: -180px; -webkit-animation:orbit 3.5s linear infinite; -moz-animation:orbit 3.5s linear infinite; } .solar i.uranus:before { background: #10C593; top: -8px; height: 15px; width: 15px; } .solar i.neptune { width: 400px; height: 400px; margin-left: -200px; left: 50%; top: 50%; margin-top: -200px; -webkit-animation:orbit 4s linear infinite; -moz-animation:orbit 4s linear infinite; } .solar i.neptune:before { background: #1470E4; top: -8px; height: 15px; width: 15px; } @-webkit-keyframes orbit{ 0%{ -webkit-transform:rotate(0deg); } 50%{ -webkit-transform:rotate(-180deg); } 100%{ -webkit-transform:rotate(-360deg); } } @-webkit-keyframes glow{ 0%{ box-shadow: none; } 50%{ background: #FFEB00; box-shadow: 0 0 20px orange; } 100%{ box-shadow: none; } } @-moz-keyframes orbit{ 0%{ -moz-transform:rotate(0deg); } 50%{ -moz-transform:rotate(-180deg); } 100%{ -moz-transform:rotate(-360deg); } } @-moz-keyframes glow{ 0%{ box-shadow: none; } 50%{ background: #FFEB00; box-shadow: 0 0 20px orange; } 100%{ box-shadow: none; } }
效果如图:看来博客不能引用jsfiddle
查看demo
相关文章推荐
- 分享一个纯css制作的动画化,在网页(手机)加载等的时候可以引用!
- 如何制作一个自适应手机、电脑、ipad的网页方法总结
- 妙味课堂:css学习--- 制作一个网页html+css过程
- [置顶] 【实战】如何通过html+css+mysql+php来快速的制作动态网页(以制作一个博客网站为列)
- 制作网页时css开局样式一个
- 【C#】对异步请求处理程序IHttpAsyncHandler的理解和分享一个易用性封装 【手记】走近科学之为什么明明实现了IEnumerable<T>的类型却不能调用LINQ扩展方法 【手记】手机网页弹出层后屏蔽底层的滑动响应 【手记】ASP.NET提示“未能创建类型”处理 【Web】一个非常简单的移动web消息框 【手记】解决EXCEL跑SQL遇“查询无法运行或数据库表无法打开...”
- CSS制作一个简单网页的下拉导航栏
- 【分享】用CSS制作一个圆形放大镜
- div+css制作网页的一些分享
- 使用JSP制作一个超简单的网页计算器的实例分享
- 手机网页在弹出输入法时候挡住输入框?网上找了很多很多 终于找到一个真真可以用的了~
- 网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率,具体DIV CSS命名规则CSS命名大全内容如下:
- 使用JSP制作一个超简单的网页计算器的实例分享
- HTML-利用CSS和JavaScript制作一个切换图片的网页
- 如何在微信朋友圈分享网页内容的时候能够有缩略图
- 最近一个刚刚毕业的朋友说,他面试时候,遇到最频繁的css问题就是垂直居中,这里给出几种垂直居中方式!
- 你能描述一下当你制作一个网页的工作流程吗?
- **你能描述一下当你制作一个网页的工作流程吗?**
- [导入]学习网页制作: 用CSS来控制网页背景
- 手机web——自适应网页设计(html/css控制)