码迷,mamicode.com
首页 > 其他好文 > 详细

使用animation动画制作走马灯效果

时间:2020-01-12 21:40:08      阅读:188      评论:0      收藏:0      [点我收藏+]

标签:opacity   absolute   top   mes   child   padding   使用   pad   ini   

  
<style> *
{ margin: 0; padding: 0; box-sizing: border-box; } .box { margin: 200px auto; width: 200px; height: 300px; position: relative; transform-style: preserve-3d; /* transform: rotateX(-15deg); */ animation: run_horse 15s linear infinite; } @keyframes run_horse { 0% { transform: rotateX(-15deg) rotateY(0deg); } 100% { transform: rotateX(-15deg) rotateY(360deg); } } .box > img { position: absolute; top: 0; left: 0; opacity: 0.9; } /* 先让每张图片转好角度 360deg/9=40deg 再沿Z轴移动相同的距离 250px再试 */ .box img:nth-child(1) { transform: translateZ(274px); } .box img:nth-child(2) { transform: rotateY(40deg) translateZ(274px); } .box img:nth-child(3) { transform: rotateY(80deg) translateZ(274px); } .box img:nth-child(4) { transform: rotateY(120deg) translateZ(274px); } .box img:nth-child(5) { transform: rotateY(160deg) translateZ(274px); } .box img:nth-child(6) { transform: rotateY(200deg) translateZ(274px); } .box img:nth-child(7) { transform: rotateY(240deg) translateZ(274px); } .box img:nth-child(8) { transform: rotateY(280deg) translateZ(274px); } .box img:nth-child(9) { transform: rotateY(320deg) translateZ(274px); } </style>
  <body>
    <div class="box">
      <img src="./images/1.png" alt="" />
      <img src="./images/2.png" alt="" />
      <img src="./images/3.png" alt="" />
      <img src="./images/4.png" alt="" />
      <img src="./images/5.png" alt="" />
      <img src="./images/6.png" alt="" />
      <img src="./images/7.png" alt="" />
      <img src="./images/8.png" alt="" />
      <img src="./images/9.png" alt="" />
    </div>
  </body>

技术图片

使用animation动画制作走马灯效果

标签:opacity   absolute   top   mes   child   padding   使用   pad   ini   

原文地址:https://www.cnblogs.com/awesom3/p/12184834.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!