效果预览

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

https://codepen.io/comehope/pen/BxbQJj

可交互视频教程

此视频是可以交互的，你可以随时暂停视频，，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/c/crvq8hq

源代码下载

每日前端实战系列的全部源代码请从 github 下载：

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom，一个容器中包含 4 个子元素，每个子元素的内容就是一堆斜线：

<div> <div><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div> <div><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div> <div><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div> <div><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div> </div>

居中显示：

body { height: 100%; display: flex; align-items: center; justify-content: center; }

定义容器尺寸：

.frame { width: 100vmin; height: 100vmin; background-color: whitesmoke; }

隐藏超出容器的内容：

.wall { overflow: hidden; }

把 4 个元素向四个方向旋转，互相垂直：

.wall { transform-origin: 0 0; } .wall.top { transform: rotate(0deg); } .wall.right { transform: rotate(90deg); } .wall.bottom { transform: rotate(180deg); } .wall.left { transform: rotate(270deg); }

定位它们，形成一个正方形：

.frame { position: relative; } .wall { position: absolute; width: 100%; } .wall.top { top: 0; left: 0; } .wall.right { top: 0; left: 100%; } .wall.bottom { top: 100%; left: 100%; } .wall.left { top: 100%; left: 0; }

对 4 个元素进行 3d 旋转：

.frame { perspective: 40vmin; } .wall.top { transform: rotate(0deg) rotateX(-90deg); } .wall.right { transform: rotate(90deg) rotateX(-90deg); } .wall.bottom { transform: rotate(180deg) rotateX(-90deg); } .wall.left { transform: rotate(270deg) rotateX(-90deg); }

把斜线加粗、放大：

.wall { font-size: 75vmin; font-weight: bold; }

最后，把 dom 中的斜线用 <marquee> 标签包围起来：

<div> <div><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div> <div><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div> <div><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div> <div><marquee>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</marquee></div> </div>

大功告成！