使用 transform:perspective(300px) rotateY(-67.3deg);
perspective 属性定义 3D 元素距视图的距离,与 perspective-origin 属性一同使用该属性,就能够改变 3D 元素的底部位置。
transform-origin 设置旋转元素的基点
animation: marquee 5s linear infinite; 无限循环一个动画
.box .inner:first-child span{ //对第一个元素的文字进行动画延时
animation-delay:2.5s;
left:-100%;
}
CSS代码:
html,body {
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
body{
background-color:#F8B595;
}
.box {
display:flex;
}
.box .inner{
width:200px;
height:100px;
line-height:100px;
font-size:2em;
font-family:sans-serif;
font-weight:bold;
white-space:nowrap;
overflow:hidden;
}
.box .inner:first-child {
background-color:#F67280;
color:#681A1E;
transform-origin:left;
transform:perspective(300px) rotateY(-67.3deg);
}
.box .inner:last-child {
background-color:#FFB6B9;
color:#FBF2D5;
transform-origin:right;
transform:perspective(300px) rotateY(67.3deg);
}
.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%;
}
}
HTML代码:、
<div class="box">
<div class="inner">
<span>Hello World</span>
</div>
<div class="inner">
<span>Hello World</span>
</div>
</div>