JQ彩色3D紙片折疊動畫

閑著無聊做了一個玩~

因是JQ制作，開始前請引入js
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>

css源碼：

body {-webkit-perspective: 500;}.wrap {position: relative;width: 200px;height: 200px;margin: 200px auto;-webkit-transition: all 1s;-webkit-transform-style: preserve-3d;-moz-transform-style: preserve-3d;transform-style: preserve-3d;-webkit-animation: change 20s linear infinite;}@-webkit-keyframes 'change' {from {-webkit-transform: rotateX(50deg) rotateY(-50deg) rotateZ(0deg);}to {-webkit-transform: rotateX(50deg) rotateY(-50deg) rotateZ(360deg);}}.wrap div {position: absolute;width: 200px;height: 20px;margin: 90px -90px;line-height: 20px;font-size: 20px;-webkit-transform-origin: 100% 0%;}add {-webkit-animation: change 5s linear infinite;}

javascript源碼：

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script> <script> function control(num, random) { for (var i = 1; i < num; i++) { // 遍歷10個 $('.wrap').append('<div>HYY' + i + '</div>').children("div:nth-child(" + i + ")").css({ 'background': 'rgba(' + random + ',' + Math.floor(Math.random()*255) + ', '+ i +', 0.5)', '-webkit-transform':' rotate('+ i +'0deg) translateZ(-'+ i +'0px)' }); }; } // num ? 控制紙片個數 // random 隨機控制色彩 var demo1 = control('200', Math.floor(Math.random()*255)); </script>

未經過本人許可，請勿私自轉載，謝謝！

總結

以上是生活随笔為你收集整理的JQ彩色3D纸片折叠动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。