原文地址:https://segmentfault.com/a/1190000014663038
感想:简单的从右到左动画
HTML代码:
<div class="box"> <div class="inner"> <span>Hello World</span> </div> <div class="inner"> <span>Hello World</span> </div> </div>
CSS代码:
html, body { margin: 0; padding: 0; height: 100%; display: flex; align-items: center; justify-content: center; } /*让 两个 inner 水平排列 */ .box{ display: flex; } .box .inner { width: 200px; height: 100px; line-height: 100px; font-size: 32px; font-family: sans-serif; font-weight: bold; /* 不换行 */ white-space: nowrap; overflow: hidden; } .box .inner:first-child { background-color: indianred; color: darkred; /* 改变被转换元素的位置 */ transform-origin: left; /* perspective 属性指定了观察者与z=0平面的距离,使具有三维位置变换的元素产生透视效果 */ transform: perspective(300px) rotateY(-67.3deg); } .box .inner:last-child { background-color: lightcoral; color: antiquewhite; transform-origin: right; transform: perspective(300px) rotateY(67.3deg); } .box .inner span { position: absolute; animation: marquee 5s linear infinite; } .box .inner:first-child span { /* 规定动画何时开始。默认是 0。 */ animation-delay: 2.5s; /* 个人认为是 left: 100%; 在右边 */ left: 100%; } /* 动画从右到左 */ @keyframes marquee { from { left: 100%; } to { left: -100%; } }