Emlog&Wordpress 纯CSS loading特效篇&4
转载请注明本文链接:https://blog.l9s.cc/.html [生成短网址]
在谷歌网站上看到一个有趣的css3特效,就扒了下来。效果如图:
<style> @-webkit-keyframes animPos { 0% { -webkit-transform: rotate(90deg) translate(-98%, 0); } 100% { -webkit-transform: rotate(90deg) translate(98%, 0); } } @-webkit-keyframes animZOrder { 0% { z-index: 100; } 100% { z-index: 1; } } .outer { height: 100px; position: absolute; width: 100px; left: 100px; top: 100px; } .running .outer { -webkit-animation: animZOrder 3520ms linear infinite; } .inner { -webkit-transform: rotate(90deg) translate(-98%, 0); border-radius: 50%; height: 100%; position: absolute; width: 100%; } .running .inner { -webkit-animation: animPos 880ms cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite alternate; } </style> <div class="main running"> <div class="outer" style="transform: rotate(45deg); animation-delay: 2640ms;"> <div class="inner" style="background: linear-gradient(315deg, rgb(0, 85, 221), rgb(0, 119, 255), rgb(0, 119, 255));"></div> </div> <div class="outer" style="transform: rotate(135deg); animation-delay: 1760ms;"> <div class="inner" style="background: linear-gradient(225deg, rgb(221, 0, 0), rgb(238, 51, 51), rgb(255, 119, 85));"></div> </div> <div class="outer" style="transform: rotate(225deg); animation-delay: 0ms;"> <div class="inner" style="background: linear-gradient(90deg, rgb(0, 119, 68), rgb(0, 153, 68), rgb(85, 187, 85));"></div> </div> <div class="outer" style="transform: rotate(315deg); animation-delay: 880ms;"> <div class="inner" style="background: linear-gradient(0deg, rgb(255, 170, 51), rgb(255, 204, 0), rgb(255, 221, 102));"></div> </div> </div>