<div class="box">
<div class="inner">
<span>Hello World</span>
</div>
<div class="inner">
<span>Hello World</span>
</div>
</div>
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: navajowhite;
}
.box {
display: flex;
}
.box .inner {
width: 400px;
height: 200px;
line-height: 200px;
font-size: 4em;
font-family: sans-serif;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
}
.box .inner:first-child {
background-color: indianred;
color: darkred;
transform-origin: right;
transform: perspective(100px) rotateY(-15deg);
}
.box .inner:last-child {
background-color: lightcoral;
color: antiquewhite;
transform-origin: left;
transform: perspective(100px) rotateY(15deg);
}
.box .inner span {
position: absolute;
animation: marquee 5s linear infinite;
}
.box .inner:first-child span {
animation-delay: 2.5s;
left: -100%;
}
@keyframes marquee {
from {
left: 100%;
}
to {
left: -100%;
}
}
学习+分享
网友评论