前端日常实战：7#视频演示如何使用纯CSS制作3D文字跑马灯特效
时间：2023-04-05 17:41:03
HTML5
效果预览在当前页面点击右侧“点击预览”按钮进行预览，点击链接即可全屏预览。https://codepen.io/zhang-ou/pen/GdrrZq交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/c/cWknNUR源码下载请到github下载。https://github.com/comehop??e/front-end-daily-challenges/tree/master/007-3d-text-marquee-effects代码解释定义dom，包括2组重复文本：HelloWorld
HelloWorld 居中显示：html,body{高度:100%;显示：弹性；对齐项目：居中；justify-content:center;}设置容器的大小和文字样式：.box{display:flex;}.box.inner{width:200px;高度：100px；行高：100px；字体大小：32px；字体系列：无衬线；字体粗细：粗体；空白：nowrap;}颜色：.box.inner:first-child{背景颜色：indianred;颜色：深红色；}.box.inner:last-child{背景色：浅珊瑚色；color:antiquewhite;}设置3d效果:.box.inner:first-child{transform-origin:left;transform:perspective(300px)rotateY(-67.3deg);}.box.inner:last-child{变换原点：ri正确；transform:perspective(300px)rotateY(67.3deg);}定义动画效果：@keyframesmarquee{from{left:100%;}至{左：-100%；}}对文本应用动画效果，并隐藏容器外的内容：.box.innerspan{position:absolute;animation:marquee5slinearinfinite;}.box.inner{overflow:hidden;}让左边的文字延时移动，模拟两组文字的连贯移动效果：.box.inner:first-childspan{animation-延迟：2.5s；left:-100%;}大功告成！知识点transform-originhttps://developer.mozilla.org/en-US/docs/Web/CSS/transform-originperspectivehttps://developer.mozilla.org/en-US/docs/Web/CSS/perspectiverotateY()https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateYanimation-delayhttps://developer.mozilla.org/en-US/docs/Web/CSS/animation-延迟
