(7)开机动画2D版，开机动画3D版
生活随笔
收集整理的這篇文章主要介紹了
(7)开机动画2D版，开机动画3D版
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、開機動畫2D版
效果圖：
注意點：
- 盡量不要操作body元素，可以設置一個div來繼承body的寬高，以此模擬body
- transform只對塊級元素生效，span為內聯元素，若要移動span的位置通過定位來實現
源代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}html,body{height: 100%;overflow: hidden;}.box1{height: 100%;background-color: gray;position: relative;}.box1 > .box2{text-align: center;position: absolute; /*設置定位后，寬度由內容撐開*/top: 50%;left: 50%;transform: translate3d(-50%,-50%,0); /*未知高寬元素居中*/font-size: 20px;white-space: nowrap;}.box1 > .box2 > span{position: relative; /*設置元素上下運動，要靠定位來實現，若設置絕對定位，所有的span會疊在一塊，最終選擇相對定位 */color: #ff0000; /* animation: move 2s linear infinite alternate; */}/*.box1 > .box2 >span:nth-child(2n+1){animation: move 2s linear infinite alternate;}.box1 > .box2 >span:nth-child(2n){animation: move 2s linear .2s infinite alternate;} */@keyframes move{from{top: 0px;/* transform: translateY(0px);/*transform只對塊級元素生效，所以在這里設置并不會生效*/}to{top: -30px;/* transform: translateY(-20px); */}}</style></head><body><div class="box1"><!--模擬body--><div class="box2"><span>請</span><span>耐</span><span>心</span><span>等</span><span>待</span><span>開</span><span>機</span><span>動</span><span>畫</span><span>~</span><span>~</span><span>~</span></div></div></body><script type="text/javascript">window.onload = function(){var spanEle = document.querySelectorAll(".box1 > .box2 >span");var colors = ['red','orange','yellow','green','blue','blue','purple','red','orange','yellow','green','blue']for (var i = 0; i < spanEle.length; i++) {spanEle[i].style.animation = "move .5s "+(i*70)+"ms linear infinite alternate";spanEle[i].style.color = colors[i];}}</script> </html>2、開機動畫3D版
效果圖：
源代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}html,body{height: 100%;overflow: hidden;}.box1{height: 100%;background-color: #00FF00;perspective: 200px;}.box1 > .box2{transform-style: preserve-3d;height: 100%;}.box1 > .box2 > img{width: 15%;margin-top: -70px;animation: move 2s linear infinite;}@keyframes move{from{transform: translate3d(-50%,-50%,0) rotateY(0deg) ;}to{transform: translate3d(-50%,-50%,0) rotateY(360deg);}}.box1 > .box2 > img,.box1 > .box2 > p{position: absolute;top: 50%;left: 50%;transform: translate3d(-50%,-50%,0) rotateY(0deg) ;font-size: 50px;}</style></head><body><div class="box1"><div class="box2"><img src="img/cloud2.png" /><p>已加載0%</p></div></div></body><script src="js/data.js"></script><script type="text/javascript">window.onload = function(){var pEle = document.querySelector('.box1 > .box2 > p');var flag = 0;var arr = []; //arr數組要存放data.js中的所有圖片for(item in imgData){arr = arr.concat(imgData[item]);}// debuggerfor(var i=0; i<arr.length;i++){var img = new Image();img.src = arr[i]; //拿到所有arr中圖片的路徑img.onload = function(){flag++;pEle.innerHTML = "已加載"+(Math.round(flag/arr.length*100))+"%";}img.onerror = function(){console.log('地址有問題')}}}</script> </html>總結
以上是生活随笔為你收集整理的(7)开机动画2D版，开机动画3D版的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： onscripter For windo
- 下一篇： VUE+Element学习笔记之登录页面