[关闭]
@xunuo 2018-08-20T09:09:14.000000Z 字数 3268 阅读 910

旋转的正方体(transition transform animation属性的应用)

前端


  1. <!DOCTYPE html>
  2. <html lang="cn">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
  6. <meta name="format-detection" content="telephone=no">
  7. <meta http-equid=“X-UA-Compatible” content=“IE=edge, chrome=1”>
  8. <title>旋转的正方体</title>
  9. <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css"/>
  10. <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  11. <style>
  12. html{/*如果时body,会出现条纹缝隙*/
  13. background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);/*表示从中心开始以椭圆形向外部渐变,中心色为#430d6d,外部颜色为#000000即黑色*/
  14. height: 100%;
  15. }
  16. #main{
  17. width: 20em;/*16px*20=320px的边长*/
  18. height: 20em;
  19. position: absolute;
  20. left: 50%;
  21. top: 50%;
  22. margin-left: -10em;
  23. margin-top: -10em;
  24. -webkit-perspective:1000px;/*物体与屏幕的位置*/
  25. -webkit-perspective-origin:50% 50%;/*从屏幕中心观看*/
  26. }
  27. #cube{
  28. -webkit-animation-name: spin; /*@keyframes动画规定的名称*/
  29. -webkit-animation-duration: 10s;/*动画持续时间*/
  30. -webkit-animation-timing-function:linear ;/*动画变化速度曲线*/
  31. -webkit-animation-iteration-count:infinite;/*动画播放次数,infinite为无限次播放*/
  32. -webkit-animation-delay: 1s;/*动画开始前延迟的时间*/
  33. position: absolute;
  34. width: 100%;
  35. height: 100%;
  36. -webkit-transform-style:preserve-3d;
  37. -webkit-transform: rotateX(-20deg) rotateY(-20deg);/*正方体的初始位置*/
  38. }
  39. #cube:hover{
  40. -webkit-animation-play-state: paused;/*鼠标放到正方体上时暂停动画*/
  41. }
  42. .cube-design{
  43. background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px),
  44. -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);/*正方体上的网格*/
  45. -webkit-background-size: 2.5em 2.5em;
  46. background-color: rgba(0, 0, 0, 0.5);/*最后一个值表示透明度*/
  47. position: absolute;
  48. width: 100%;
  49. height: 100%;
  50. color: #77ffb9;
  51. }
  52. #face-front {
  53. -webkit-transform: translateZ(10em);
  54. }
  55. #face-right{
  56. -webkit-transform: rotateY(90deg) translateZ(10em);
  57. }
  58. #face-back{
  59. -webkit-transform: rotateX(180deg) translateZ(10em);
  60. }
  61. #face-left{
  62. -webkit-transform: rotateY(-90deg) translateZ(10em);
  63. }
  64. #face-top{
  65. -webkit-transform: rotateX(90deg) translateZ(10em);
  66. }
  67. #face-bottom{
  68. -webkit-transform: rotateX(-90deg) translateZ(10em);
  69. }
  70. @-webkit-keyframes spin {/*规定动画变化情况*/
  71. from {
  72. -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg) rotateZ(0);
  73. }
  74. to {
  75. -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg) rotateZ(360deg);
  76. }
  77. }
  78. </style>
  79. </head>
  80. <body>
  81. <div>
  82. </div>
  83. <div id="main">
  84. <div id="cube">
  85. <div id="face-front" class="cube-design">1</div>
  86. <div id="face-right" class="cube-design">2</div>
  87. <div id="face-back" class="cube-design">3</div>
  88. <div id="face-left" class="cube-design">4</div>
  89. <div id="face-top" class="cube-design">5</div>
  90. <div id="face-bottom" class="cube-design">6</div>
  91. </div>
  92. </div>
  93. <script>
  94. var flag=false;
  95. $('#cube').click(function(){
  96. if(!flag){
  97. document.getElementById('cube').style.webkitAnimationDuration='0s';
  98. flag=true;
  99. }
  100. else{
  101. document.getElementById('cube').style.webkitAnimationName="spin";
  102. document.getElementById('cube').style.webkitAnimationDuration="10s";
  103. document.getElementById('cube').style.webkitAnimationTimingFunction="linear";
  104. document.getElementById('cube').style.webkitAnimationIterationCount="infinite";
  105. flag=false;
  106. }
  107. });
  108. </script>
  109. </body>
  110. </html>
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注