http://cssload.net/----动画
来源：互联网 发布：淘宝无线开放平台 编辑：程序博客网 时间：2024/04/26 23:17
<div class="cssload-dots"> <div class="cssload-dot"></div> <div class="cssload-dot"></div> <div class="cssload-dot"></div> <div class="cssload-dot"></div> <div class="cssload-dot"></div></div><svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="12" ></feGaussianBlur> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" ></feColorMatrix> <!--<feBlend in2="goo" in="SourceGraphic" result="mix" ></feBlend>--> </filter> </defs></svg>.cssload-dots { width: 0; height: 0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; outline: 1px solid red; filter: url(#goo); -o-filter: url(#goo); -ms-filter: url(#goo); -webkit-filter: url(#goo); -moz-filter: url(#goo);}.cssload-dot { width: 0; height: 0; position: absolute; left: 0; top: 0;}.cssload-dot:before { content: ""; width: 34px; height: 34px; border-radius: 49px; background: rgb(251,211,1); position: absolute; left: 50%; transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); margin-left: -17.5px; margin-top: -17.5px;}.cssload-dot:nth-child(5):before { z-index: 100; width: 44.5px; height: 44.5px; margin-left: -21.75px; margin-top: -21.75px; animation: cssload-dot-colors 4.6s ease infinite; -o-animation: cssload-dot-colors 4.6s ease infinite; -ms-animation: cssload-dot-colors 4.6s ease infinite; -webkit-animation: cssload-dot-colors 4.6s ease infinite; -moz-animation: cssload-dot-colors 4.6s ease infinite;}.cssload-dot:nth-child(1) { animation: cssload-dot-rotate-1 4.6s 0s linear infinite; -o-animation: cssload-dot-rotate-1 4.6s 0s linear infinite; -ms-animation: cssload-dot-rotate-1 4.6s 0s linear infinite; -webkit-animation: cssload-dot-rotate-1 4.6s 0s linear infinite; -moz-animation: cssload-dot-rotate-1 4.6s 0s linear infinite;}.cssload-dot:nth-child(1):before { background-color: rgb(255,50,112); animation: cssload-dot-move 4.6s 0s ease infinite; -o-animation: cssload-dot-move 4.6s 0s ease infinite; -ms-animation: cssload-dot-move 4.6s 0s ease infinite; -webkit-animation: cssload-dot-move 4.6s 0s ease infinite; -moz-animation: cssload-dot-move 4.6s 0s ease infinite;}.cssload-dot:nth-child(2) { animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite; -o-animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite; -ms-animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite; -webkit-animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite; -moz-animation: cssload-dot-rotate-2 4.6s 1.15s linear infinite;}.cssload-dot:nth-child(2):before { background-color: rgb(32,139,241); animation: cssload-dot-move 4.6s 1.15s ease infinite; -o-animation: cssload-dot-move 4.6s 1.15s ease infinite; -ms-animation: cssload-dot-move 4.6s 1.15s ease infinite; -webkit-animation: cssload-dot-move 4.6s 1.15s ease infinite; -moz-animation: cssload-dot-move 4.6s 1.15s ease infinite;}.cssload-dot:nth-child(3) { animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite; -o-animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite; -ms-animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite; -webkit-animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite; -moz-animation: cssload-dot-rotate-3 4.6s 2.3s linear infinite;}.cssload-dot:nth-child(3):before { background-color: rgb(175,225,2); animation: cssload-dot-move 4.6s 2.3s ease infinite; -o-animation: cssload-dot-move 4.6s 2.3s ease infinite; -ms-animation: cssload-dot-move 4.6s 2.3s ease infinite; -webkit-animation: cssload-dot-move 4.6s 2.3s ease infinite; -moz-animation: cssload-dot-move 4.6s 2.3s ease infinite;}.cssload-dot:nth-child(4) { animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite; -o-animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite; -ms-animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite; -webkit-animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite; -moz-animation: cssload-dot-rotate-4 4.6s 3.45s linear infinite;}.cssload-dot:nth-child(4):before { background-color: rgb(251,211,1); animation: cssload-dot-move 4.6s 3.45s ease infinite; -o-animation: cssload-dot-move 4.6s 3.45s ease infinite; -ms-animation: cssload-dot-move 4.6s 3.45s ease infinite; -webkit-animation: cssload-dot-move 4.6s 3.45s ease infinite; -moz-animation: cssload-dot-move 4.6s 3.45s ease infinite;}@keyframes cssload-dot-move { 0% { transform: translateY(0); } 18%, 22% { transform: translateY(-68px); } 40%, 100% { transform: translateY(0); }}@-o-keyframes cssload-dot-move { 0% { -o-transform: translateY(0); } 18%, 22% { -o-transform: translateY(-68px); } 40%, 100% { -o-transform: translateY(0); }}@-ms-keyframes cssload-dot-move { 0% { -ms-transform: translateY(0); } 18%, 22% { -ms-transform: translateY(-68px); } 40%, 100% { -ms-transform: translateY(0); }}@-webkit-keyframes cssload-dot-move { 0% { -webkit-transform: translateY(0); } 18%, 22% { -webkit-transform: translateY(-68px); } 40%, 100% { -webkit-transform: translateY(0); }}@-moz-keyframes cssload-dot-move { 0% { -moz-transform: translateY(0); } 18%, 22% { -moz-transform: translateY(-68px); } 40%, 100% { -moz-transform: translateY(0); }}@keyframes cssload-dot-colors { 0% { background-color: rgb(251,211,1); } 25% { background-color: rgb(255,50,112); } 50% { background-color: rgb(32,139,241); } 75% { background-color: rgb(175,225,2); } 100% { background-color: rgb(251,211,1); }}@-o-keyframes cssload-dot-colors { 0% { background-color: rgb(251,211,1); } 25% { background-color: rgb(255,50,112); } 50% { background-color: rgb(32,139,241); } 75% { background-color: rgb(175,225,2); } 100% { background-color: rgb(251,211,1); }}@-ms-keyframes cssload-dot-colors { 0% { background-color: rgb(251,211,1); } 25% { background-color: rgb(255,50,112); } 50% { background-color: rgb(32,139,241); } 75% { background-color: rgb(175,225,2); } 100% { background-color: rgb(251,211,1); }}@-webkit-keyframes cssload-dot-colors { 0% { background-color: rgb(251,211,1); } 25% { background-color: rgb(255,50,112); } 50% { background-color: rgb(32,139,241); } 75% { background-color: rgb(175,225,2); } 100% { background-color: rgb(251,211,1); }}@-moz-keyframes cssload-dot-colors { 0% { background-color: rgb(251,211,1); } 25% { background-color: rgb(255,50,112); } 50% { background-color: rgb(32,139,241); } 75% { background-color: rgb(175,225,2); } 100% { background-color: rgb(251,211,1); }}@keyframes cssload-dot-rotate-1 { 0% { transform: rotate(-105deg); } 100% { transform: rotate(270deg); }}@-o-keyframes cssload-dot-rotate-1 { 0% { -o-transform: rotate(-105deg); } 100% { -o-transform: rotate(270deg); }}@-ms-keyframes cssload-dot-rotate-1 { 0% { -ms-transform: rotate(-105deg); } 100% { -ms-transform: rotate(270deg); }}@-webkit-keyframes cssload-dot-rotate-1 { 0% { -webkit-transform: rotate(-105deg); } 100% { -webkit-transform: rotate(270deg); }}@-moz-keyframes cssload-dot-rotate-1 { 0% { -moz-transform: rotate(-105deg); } 100% { -moz-transform: rotate(270deg); }}@keyframes cssload-dot-rotate-2 { 0% { transform: rotate(165deg); } 100% { transform: rotate(540deg); }}@-o-keyframes cssload-dot-rotate-2 { 0% { -o-transform: rotate(165deg); } 100% { -o-transform: rotate(540deg); }}@-ms-keyframes cssload-dot-rotate-2 { 0% { -ms-transform: rotate(165deg); } 100% { -ms-transform: rotate(540deg); }}@-webkit-keyframes cssload-dot-rotate-2 { 0% { -webkit-transform: rotate(165deg); } 100% { -webkit-transform: rotate(540deg); }}@-moz-keyframes cssload-dot-rotate-2 { 0% { -moz-transform: rotate(165deg); } 100% { -moz-transform: rotate(540deg); }}@keyframes cssload-dot-rotate-3 { 0% { transform: rotate(435deg); } 100% { transform: rotate(810deg); }}@-o-keyframes cssload-dot-rotate-3 { 0% { -o-transform: rotate(435deg); } 100% { -o-transform: rotate(810deg); }}@-ms-keyframes cssload-dot-rotate-3 { 0% { -ms-transform: rotate(435deg); } 100% { -ms-transform: rotate(810deg); }}@-webkit-keyframes cssload-dot-rotate-3 { 0% { -webkit-transform: rotate(435deg); } 100% { -webkit-transform: rotate(810deg); }}@-moz-keyframes cssload-dot-rotate-3 { 0% { -moz-transform: rotate(435deg); } 100% { -moz-transform: rotate(810deg); }}@keyframes cssload-dot-rotate-4 { 0% { transform: rotate(705deg); } 100% { transform: rotate(1080deg); }}@-o-keyframes cssload-dot-rotate-4 { 0% { -o-transform: rotate(705deg); } 100% { -o-transform: rotate(1080deg); }}@-ms-keyframes cssload-dot-rotate-4 { 0% { -ms-transform: rotate(705deg); } 100% { -ms-transform: rotate(1080deg); }}@-webkit-keyframes cssload-dot-rotate-4 { 0% { -webkit-transform: rotate(705deg); } 100% { -webkit-transform: rotate(1080deg); }}@-moz-keyframes cssload-dot-rotate-4 { 0% { -moz-transform: rotate(705deg); } 100% { -moz-transform: rotate(1080deg); }} 0 0
- http://cssload.net/----动画
- Cocos2d-x2.0 进度动画 深入分析http://www.oschina.net/question/565065_101742
- [VB.NET]简单动画
- 使用CSS3构建Ajax加载动画(转http://blog.csdn.net/hfahe/archive/2011/02/10/6177825.aspx)
- http://net-snmp.sourceforge.net/
- http://www.zjjyy.net/
- http://fanqiang.chinaunix.net/
- http://www.csdn.net/
- http://xcraft.nease.net/
- http://www.shizhou.net/
- http://prototype.conio.net/
- http://twpug.net
- http://www.itcast.net
- http://vcer.net/
- http://passport.csdn.net
- asp.net http handler
- Blog http://livesino.net/
- http://www.oschina.net/
- Android 中获取 debug 测试 SHA1 和 release SHA1 证书指纹数据的方法
- css3之background-origin和background-clip的区别与联系
- Android之UID and PID
- 自定义SectionAdapter显示数据
- JQuery解析XML
- http://cssload.net/----动画
- Leetcode189: Peeking Iterator
- .net(c#)操作IIS大全
- 源码推荐(12.09)：超强 AFN 封装，一行搞定自适应label&适配iPhone
- Struts2的运行流程及其工作原理
- Luajit反编译之探索记
- 一步一步学习TypeScript(07.Any类型)
- thinkphp 3.2 =》0623-8_执行查询sql
- 【code】animate综合动画
