css3動畫（animation）效果3-正方體合成
阿新 • • 發佈：2018-03-01
per rip relative java tom gpo 介紹 ack rotate
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋轉的星球</title> <style type="text/css"> ul{ margin: 0; padding: 0; list-style: none; } .box{ height: 100px; width: 100px; perspective: 500px; margin: 50px 0 0 50px; } .list{ position: relative; height: 100px; width: 100px; background-color: blue; transform-style: preserve-3d; transform-origin: 0 0 0; animation: rotate 1s 10s 3 both linear; } .in{ position: absolute; height: 100px; width: 100px; } .list .in:nth-child(6){ background-color: pink; transform-origin: top; animation: in6 2s both; } .list .in:nth-child(5){ background-color: lightgreen; transform-origin: right; animation: in5 2s 2s both; } .list .in:nth-child(4){ background-color: lightblue; transform-origin: bottom; animation: in4 2s 4s both; } .list .in:nth-child(3){ background-color: lightcoral; transform-origin: left; animation: in3 2s 6s both; } .list .in:nth-child(2){ background-color: lightcyan; animation: in2 2s 8s both; } .list .in:nth-child(1){background-color: lightsalmon;} .box:hover .list{animation-play-state: paused;} .box:hover .in{animation-play-state: paused;} @keyframes in6{100%{transform: rotateX(90deg);}} @keyframes in5{100%{transform: rotateY(90deg);}} @keyframes in4{100%{transform: rotateX(-90deg);}} @keyframes in3{100%{transform: rotateY(-90deg);}} @keyframes in2{100%{transform: translateZ(100px);}} @keyframes rotate{100%{transform: rotate3d(1,1,1,360deg);}} </style> </head> <body> <div class="box"> <ul class="list" id="list"> <li class="in"></li> <li class="in"></li> <li class="in"></li> <li class="in"></li> <li class="in"></li> <li class="in"></li> </ul> </div> <script type="text/javascript"> list.addEventListener(‘animationend‘,function(e){ e = e || event; var target = e.target || e.srcElement; if(target.nodeName == ‘UL‘){ list.style.animationName = ‘none‘; var children = list.getElementsByTagName(‘li‘); for(var i = 0; i < children.length;i++){ children[i].style.animationName = ‘none‘; } setTimeout(function(){ list.style.animationName = ‘rotate‘; var children = list.getElementsByTagName(‘li‘); for(var i = 0; i < children.length;i++){ children[i].style.animationName = ‘in‘ + (i+1); } },100); } },false); </script> <strong>【簡要介紹】</strong> <p>該效果主要通過設置計算後的延遲時間來達到正方體的各個邊順序動畫的效果。一次動畫結束後，通過觸發animationend事件重置animation-name來實現重復動畫的效果</p> </body> </html>
效果圖：
原鏈接：https://www.cnblogs.com/xiaohuochai/p/5419236.html
css3動畫（animation）效果3-正方體合成