实现CSS3漂亮的loadding加载动画
分类:实例代码
CSS3漂亮的loadding加载动画属于前端实例代码,有关更多实例代码大家可以查看。
分享一段代码实例,它实现了loadding加载动画效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> <style media="screen"> .sk-folding-cube { margin: 40px auto; width: 40px; height: 40px; position: relative; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .sk-folding-cube .sk-cube { float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .sk-folding-cube .sk-cube:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #333333; -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; animation: sk-foldCubeAngle 2.4s infinite linear both; -webkit-transform-origin: 100% 100%; /*transform-origin来定义X轴和Y轴为基础的3D位置*/ -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; } .sk-folding-cube .sk-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg); } .sk-folding-cube .sk-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg); } .sk-folding-cube .sk-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg); } .sk-folding-cube .sk-cube2:before { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .sk-folding-cube .sk-cube3:before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sk-folding-cube .sk-cube4:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } @-webkit-keyframes sk-foldCubeAngle { 0%,10% { /*perspective属性设置镜头到元素平面的距离*/ -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%,75% { transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%,100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } @keyframes sk-foldCubeAngle { 0%,10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%,75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%,100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } </style> </head> <body> <div class="sk-folding-cube"> <div class="sk-cube1 sk-cube"></div> <div class="sk-cube2 sk-cube"></div> <div class="sk-cube4 sk-cube"></div> <div class="sk-cube3 sk-cube"></div> </div> </body> </html>
CSS3漂亮的loadding加载动画,这样的场景在实际项目中还是用的比较多的,关于CSS3漂亮的loadding加载动画就介绍到这了。