css3 3d走马灯,【CSS练习】如何用纯 CSS 创作一个 3D 文字跑马灯特效

知识点

1.white-space 属性

normal

默认。空白会被浏览器忽略。

pre

空白会被浏览器保留。其行为方式类似 HTML 中的

 标签。

nowrap

文本不会换行，文本会在在同一行上继续，直到遇到

标签为止。

pre-wrap

保留空白符序列，但是正常地进行换行。

pre-line

合并空白符序列，但是保留换行符。

inherit

规定应该从父元素继承 white-space 属性的值。

transform

允许你旋转，缩放，倾斜或平移给定元素

transform-origin

更改一个元素变形的原点

代码

html, body {

display: flex;

justify-content: center;

align-items: center;

height: 100%;

}

.box {

display: flex;

}

.inner {

width: 200px;

height: 100px;

line-height: 100px;

font-size: 32px;

font-family: sans-serif;

font-weight: bold;

white-space: nowrap;

overflow: hidden;

}

span {

position: absolute;

animation: move 5s linear infinite;

}

.inner:first-child{

background-color: indianred;

color: darkred;

transform-origin: left;

transform: perspective(300px) rotateY(-67.3deg);

}

.inner:first-child span{

animation-delay:2.5s;

left:-100%;

}

.inner:last-child{

background-color: lightcoral;

color: antiquewhite;

transform-origin: right;

transform: perspective(300px) rotateY(67.3deg);

}

@keyframes move{

from{

left:100%;

}

to {

left: -100%;

}

}