前端日常实践：166#视频演示如何使用CSS制作SafariLOGO

时间：2023-04-05 01:45:50 HTML5

效果预览按右侧“点击预览”按钮可在当前页面预览，点击链接可全屏预览。https://codepen.io/comehop??e/pen/rgmPLR互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/c2LBPPtg源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-challenges代码解读容器基本属性Safari浏览器的LOGO是一个圆规的形状，主要有两个元素，一个是表盘周围的刻度线，一个是中间的指针。所以我们定义dom结构如下，其中.marks代表刻度线，.pointer代表指针。.marks中有4个元素，代表刻度线。有几十个实际的刻度线。这里只定义了4个。目的是促进写作风格。样式写好后会使用JavaScript批量生成勾号：

让作品显示在页面中央，背景为页面是黑色的：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明-内容：中心；background-color:black;}LOGO容器是一个白色的圆角正方形。作品将使用em作为长度单位。如果要修改LOGO的大小，只需要修改这里的font-size属性即可。使用flexlayout将子元素.marks和.pointer居中：.safari{font-size:10px;宽度：15em；高度：15em；背景色：雪；边界半径：25%；填充：1em；显示：弹性；对齐项目：居中；justify-content:center;}绘制刻度线首先绘制刻度线所在的刻度盘，用线性渐变的蓝色渐变色填充：.marks{width:inherit;高度：继承；背景图像：线性渐变（hsl（191、98%、55%）、hsl（220、88%、53%））；border-radius:50%;}再次绘制刻度线。画圆的技巧是先将一组元素旋转一个小角度（使用rotate()函数），然后沿旋转方向移动元素（使用translate()函数）。这里变量--rotate-deg用于存储旋转角度：.marks{display:flex;对齐项目：居中；证明内容：中心；}.marks跨度{位置：绝对；宽度：0.1em；高度：0.9em；背景色：雪；变换：旋转（var（--rotate-deg））translateY（6em）;}.marksspan：nth-??child（1）{--rotate-deg：0deg;}.marksspan：nth-??child（2）{--rotate-deg:90deg;}.marksspan:nth-child(3){--rotate-deg:180deg;}.marksspan:nth-child(4){--rotate-deg:270deg;}现在可以看到4条刻度线分别位于表盘的上下左右边缘。用Javascript批量生成刻度线因为刻度线很多，为了减少代码量，我们使用JavaScript批量生成刻度线。在此之前，删除html中声明元素的4行代码：