原文地址：https://segmentfault.com/a/1190000014964220
感想：动画效果运用了具有滚动效果的marquee标签
HTML代码：
注释： <!-- marquee 用来插入一段滚动的文字; 元素已经 过时，请不要再使用 !!! -->
<div class="frame"> ???<div class="wall top"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div> ???<div class="wall right"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div> ???<div class="wall bottom"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div> ???<div class="wall left"><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div></div>
CSS代码：
html, body { ???margin: 0; ???padding: 0;}.frame { ???position: relative; ???/* 视口的宽高 vmin vmax */ ???width: 100vmin; ???height: 100vmin; ???/* whitesmoke 烟白色 */ ???background-color: whitesmoke; ???/* 设置元素被查看位置的视图：只影响 3D 转换元素 */ ???perspective: 40vmin;}.wall{ ???position: absolute; ???width: 100%; ???font-size: 75vmin; ???font-weight: bold; ???overflow: hidden; ???transform-origin: 0 0;}.wall.top { ???top: 0; ???left: 0; ???transform: rotate(0deg) rotateX(-90deg);}.wall.right { ???top: 0; ???left: 100%; ???transform: rotate(90deg) rotateX(-90deg);}.wall.bottom { ???top: 100%; ???left: 100%; ???transform: rotate(180deg) rotateX(-90deg);}.wall.left { ???top: 100%; ???left: 0; ???transform: rotate(270deg) rotateX(-90deg);}29.如何不用 transition 和 animation 也能做网页动画
原文地址：https://www.cnblogs.com/FlyingLiao/p/10314786.html