前端日常实践：29#视频演示如何做无转场无动画的网页动画

时间：2023-04-05 11:18:34 HTML5

效果预览按右侧“点击预览”按钮可在当前页面预览，点击链接可全屏预览.https://codepen.io/comehop??e/pen/BxbQJj互动视频教程本视频是互动式的，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/c/crvq8hq源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，一个容器包含4个子元素，每个子元素的内容是一串斜线：///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

<字幕>////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////居中显示：body{height:100%;显示：弹性；对齐项目：居中；justify-content:center;}定义容器尺寸：.frame{width:100vmin;高度：100vmin；background-color:whitesmoke;}隐藏容器之外的内容：.wall{overflow:hidden;}沿四个方向旋转4个元素，相互垂直：.wall{transform-origin:00;}.wall.top{transform:rotate(0deg);}.wall.right{transform:rotate(90deg);}.wall.bottom{transform:rotate(180deg);}.wall.left{transform:rotate(270deg);}定位它们，这样他们形成一个正方形：。frame{位置：相对；}.wall{位置：绝对；宽度：100%；}.wall.top{顶部：0；左：0；}.wall.right{上：0；左：100%；}。wall.bottom{顶部：100%；左：100%；}.wall.left{上：100%；左：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:75v分钟；font-weight:bold;}最后，用标签将dom中的斜杠括起来：///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////<选取框>//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////大功告成！

上一篇：fabric.js使用总结

下一篇：力展物流公司低成本上云，提高实例资源使用效率

前端日常实践：29#视频演示如何做无转场无动画的网页动画相关文章