使用animation动画制作走马灯效果
Posted awesom3
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用animation动画制作走马灯效果相关的知识，希望对你有一定的参考价值。
<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动画制作走马灯效果的主要内容，如果未能解决你的问题，请参考以下文章