摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
效果预览
按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。
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 个子元素,每个子元素的内容就是一堆斜线:
居中显示:
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 中的斜线用
大功告成!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113350.html
摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频教程此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 showImg(https://segmentfault.com/img/bVbbytf?w=500&h=500); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comeh...
摘要:过往项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书频演示如何用纯创作一种按钮被瞄准的交互特效视频演示如何用纯创作一个同心圆弧旋转特效视频演 过往项目 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 5 月份发布的项目 《前端每日实战》专栏每天分解一个前端项目,用视频记录...
摘要:过往项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书频演示如何用纯创作一种按钮被瞄准的交互特效视频演示如何用纯创作一个同心圆弧旋转特效视频演 过往项目 2018 年 4 月份项目汇总(共 8 个项目) 2018 年 5 月份发布的项目 《前端每日实战》专栏每天分解一个前端项目,用视频记录...
阅读 3472·2021-11-23 10:10
阅读 3260·2019-08-30 14:03
阅读 2044·2019-08-30 13:09
阅读 3336·2019-08-29 15:29
阅读 1507·2019-08-29 11:23
阅读 1966·2019-08-28 18:28
阅读 2823·2019-08-26 13:34
阅读 2150·2019-08-26 11:32