摘要:
下文讲述使用css代码制作一个”点状圆形的加载等待效果”的方法分享,如下所示:
下午将通过示例的方式讲述其方法,如下所示:
实现思路: 1.绘制5个点状元素 2.设置动画,对元素进行旋转 即可模拟出“加载等待效果”
例:
css3代码编写一个“点状圆形的加载等待效果”的示例分析
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.maomao365.com/" /> <title>猫猫小屋</title> <style> /*css reset */ body, p, div, ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, iframe, nav { margin: 0; padding: 0; } .wrapper { width: 1000px; margin: 200px auto; } .windows8 { position: relative; width: 44px; height: 44px; margin: auto; } .windows8 .wBall { position: absolute; width: 42px; height: 42px; opacity: 0; transform: rotate(225deg); -o-transform: rotate(225deg); -ms-transform: rotate(225deg); -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); animation: orbit 3.6325s infinite; -o-animation: orbit 3.6325s infinite; -webkit-animation: orbit 3.6325s infinite; -moz-animation: orbit 3.6325s infinite; } .windows8 .wBall .wInnerBall { position: absolute; width: 5px; height: 5px; background: rgb(0,0,0); left: 0px; top: 0px; border-radius: 5px; } .windows8 #wBall_1 { animation-delay: 0.796s; -o-animation-delay: 0.796s; -webkit-animation-delay: 0.796s; -moz-animation-delay: 0.796s; } .windows8 #wBall_2 { animation-delay: 0.153s; -o-animation-delay: 0.153s; -webkit-animation-delay: 0.153s; -moz-animation-delay: 0.153s; } .windows8 #wBall_3 { animation-delay: 0.3165s; -o-animation-delay: 0.3165s; -webkit-animation-delay: 0.3165s; -moz-animation-delay: 0.3165s; } .windows8 #wBall_4 { animation-delay: 0.4695s; -o-animation-delay: 0.4695s; -webkit-animation-delay: 0.4695s; -moz-animation-delay: 0.4695s; } .windows8 #wBall_5 { animation-delay: 0.633s; -o-animation-delay: 0.633s; -webkit-animation-delay: 0.633s; -moz-animation-delay: 0.633s; } @keyframes orbit { 0% { opacity: 1; z-index: 99; transform: rotate(180deg); animation-timing-function: ease-out; } 7% { opacity: 1; transform: rotate(300deg); animation-timing-function: linear; } 30% { opacity: 1; transform: rotate(410deg); animation-timing-function: ease-in-out; } 39% { opacity: 1; transform: rotate(645deg); animation-timing-function: linear; } 70% { opacity: 1; transform: rotate(770deg); animation-timing-function: ease-out; } 75% { opacity: 1; transform: rotate(900deg); animation-timing-function: ease-out; } 76% { opacity: 0; transform: rotate(900deg); } 100% { opacity: 0; transform: rotate(900deg); } } @-o-keyframes orbit { 0% { opacity: 1; z-index: 99; -o-transform: rotate(180deg); -o-animation-timing-function: ease-out; } 7% { opacity: 1; -o-transform: rotate(300deg); -o-animation-timing-function: linear; } 30% { opacity: 1; -o-transform: rotate(410deg); -o-animation-timing-function: ease-in-out; } 39% { opacity: 1; -o-transform: rotate(645deg); -o-animation-timing-function: linear; } 70% { opacity: 1; -o-transform: rotate(770deg); -o-animation-timing-function: ease-out; } 75% { opacity: 1; -o-transform: rotate(900deg); -o-animation-timing-function: ease-out; } 76% { opacity: 0; -o-transform: rotate(900deg); } 100% { opacity: 0; -o-transform: rotate(900deg); } } @-ms-keyframes orbit { 0% { opacity: 1; z-index: 99; -ms-transform: rotate(180deg); } 7% { opacity: 1; -ms-transform: rotate(300deg); } 30% { opacity: 1; -ms-transform: rotate(410deg); } 39% { opacity: 1; -ms-transform: rotate(645deg); } 70% { opacity: 1; -ms-transform: rotate(770deg); } 75% { opacity: 1; -ms-transform: rotate(900deg); } 76% { opacity: 0; -ms-transform: rotate(900deg); } 100% { opacity: 0; -ms-transform: rotate(900deg); } } @-webkit-keyframes orbit { 0% { opacity: 1; z-index: 99; -webkit-transform: rotate(180deg); -webkit-animation-timing-function: ease-out; } 7% { opacity: 1; -webkit-transform: rotate(300deg); -webkit-animation-timing-function: linear; } 30% { opacity: 1; -webkit-transform: rotate(410deg); -webkit-animation-timing-function: ease-in-out; } 39% { opacity: 1; -webkit-transform: rotate(645deg); -webkit-animation-timing-function: linear; } 70% { opacity: 1; -webkit-transform: rotate(770deg); -webkit-animation-timing-function: ease-out; } 75% { opacity: 1; -webkit-transform: rotate(900deg); -webkit-animation-timing-function: ease-out; } 76% { opacity: 0; -webkit-transform: rotate(900deg); } 100% { opacity: 0; -webkit-transform: rotate(900deg); } } @-moz-keyframes orbit { 0% { opacity: 1; z-index: 99; -moz-transform: rotate(180deg); -moz-animation-timing-function: ease-out; } 7% { opacity: 1; -moz-transform: rotate(300deg); -moz-animation-timing-function: linear; } 30% { opacity: 1; -moz-transform: rotate(410deg); -moz-animation-timing-function: ease-in-out; } 39% { opacity: 1; -moz-transform: rotate(645deg); -moz-animation-timing-function: linear; } 70% { opacity: 1; -moz-transform: rotate(770deg); -moz-animation-timing-function: ease-out; } 75% { opacity: 1; -moz-transform: rotate(900deg); -moz-animation-timing-function: ease-out; } 76% { opacity: 0; -moz-transform: rotate(900deg); } 100% { opacity: 0; -moz-transform: rotate(900deg); } } </style> </head> <body> <div class="wrapper"> <div class="windows8"> <div class="wBall" id="wBall_1"> <div class="wInnerBall"></div> </div> <div class="wBall" id="wBall_2"> <div class="wInnerBall"></div> </div> <div class="wBall" id="wBall_3"> <div class="wInnerBall"></div> </div> <div class="wBall" id="wBall_4"> <div class="wInnerBall"></div> </div> <div class="wBall" id="wBall_5"> <div class="wInnerBall"></div> </div> </div> </div> </body> </html>