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

旋转的正方体(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>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注