您现在的位置:爱折腾>> web>>正文内容

css3动画——视觉欺骗

css3视觉欺骗

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.         <meta charset="utf-8"> 
  5.         <title>css3视觉欺骗</title> 
  6.         <style> 
  7.             body,ul,li{padding:0;margin:0;}  
  8.             ul,li{list-style-type:none;}  
  9.             html{height:100%;}  
  10.             body{background:#E2E2E2;height:100%;}  
  11.             .box{width:440px;height:200px;background: #000000;position:relative;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}  
  12.               
  13.             .box-ul{width:400px;height:50px;display: -webkit-box;margin:0 auto;position:absolute;top:0;left:20px;-webkit-animation:translate 6s linear infinite;animation:translate 6s linear infinite;}  
  14.             .box-ul li{-webkit-box-flex:1;height:50px;width:25%;background:#FFF632;transform:scaleX(.5);-webkit-transform:scaleX(.5);-webkit-animation:scale 6s linear infinite;animation:scale 6s linear infinite;}  
  15.             .box-ul li:nth-child(2n){background:#00047E;}  
  16.             .box-bg{width:440px;height:200px;background: #000000;background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, 1)), color-stop(.5, transparent), to(transparent));background-image: linear-gradient(0deg,rgba(255, 255, 255,1) 50%, transparent 50%, transparent);background-size:auto 25px;}  
  17.               
  18.             @-webkit-keyframes translate{  
  19.                 0%,100%{-webkit-transform:translateY(0)}  
  20.                 50%{-webkit-transform:translateY(150px)}  
  21.             }  
  22.             @keyframes translate{  
  23.                 0%,100%{transform:translateY(0)}  
  24.                 50%{transform:translateY(150px)}  
  25.             }  
  26.             @-webkit-keyframes scale{  
  27.                 0%,100%{-webkit-transform:scaleX(.5)}  
  28.                 50%{-webkit-transform:scaleX(1)}  
  29.             }  
  30.             @keyframes scale{  
  31.                 0%,100%{transform:scaleX(.5)}  
  32.                 50%{transform:scaleX(1)}  
  33.             }  
  34.               
  35.         </style> 
  36.     </head> 
  37.     <body> 
  38.         <div class="box"> 
  39.             <div class="box-bg"></div> 
  40.             <ul class="box-ul"> 
  41.                 <li></li> 
  42.                 <li></li> 
  43.                 <li></li> 
  44.                 <li></li> 
  45.             </ul> 
  46.         </div> 
  47.           
  48.     </body> 
  49. </html> 

相关文章