最近做一个足球的后台，想弄一个好看耐用的加载效果，然后结合其他的loading效果灵感，做了一个自己感觉还行的效果出来，希望大家喜欢！ html 代码 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>`substitute(Filename('', 'Page Title'), '^.', '\u&', '')`</title> </head> <style> .Loading{ position: absolute; background-color: rgba(255,255,255,0.2); left:0;right:0;top:0;bottom: 0; width:100%; height:100%; display:flex;/*多轮布局*/ align-items:center;/*垂直*/ justify-content:center;/*水平*/ z-index: 9999 } .laodingCon{width:50px;height: 120px;} .ball { -webkit-animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate; -ms-animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate; -moz-animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate; animation: ball 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate; height: 50px; width: 50px; background: url(http://www.njgep.com/images/loading-icon.png) no-repeat center; background-size: 100% } .ballshadow { -webkit-animation: shadow 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate; animation: shadow 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate; background: #000; bottom: -90px; height: 15px; width: 50px; -webkit-animation-delay: 0; animation-delay: 0; border-radius: 100%; } @-webkit-keyframes ball { 0% { -webkit-transform: translateY( 0 ); transform: translateY( 0 ); } 100% { -webkit-transform: translateY( -50px ); transform: translateY( -50px ); } } @keyframes ball { 0% { -webkit-transform: translateY( 0 ); transform: translateY( 0 ); } 100% { -webkit-transform: translateY( -50px ); transform: translateY( -50px ); } } @-webkit-keyframes shadow { 0% { opacity: 0.2; -webkit-transform: scale( 0.3 ); transform: scale( 0.3); } 100% { opacity: 0.05; -webkit-transform: scale( 1 ); transform: scale( 1 ); } } @keyframes shadow { 0% { opacity: 0.2; -webkit-transform: scale( 0.3); transform: scale( 0.3); } 100% { opacity: 0.05; -webkit-transform: scale( 1 ); transform: scale( 1 ); } } </style> <body> <div id="_loading_page" class="Loading" :style="style" > <div class="laodingCon"> <div class="ball"></div> <div class="ballshadow"></div> </div> </div> </body> </html> 效果用图：
评论 (1 )
最新评论
楼主平时开发用到CSS动画多么？