昨晚北京下大雪了。让我们用CSS画出一片雪花，迎接这个洁白而美丽的世界！1.效果预览点击右侧“点击预览”按钮可在当前页面进行预览，点击链接可全屏预览。https://codepen.io/comehop??e/pen/LYEeRBb二、源码下载前端实战系列日常请从github下载所有源码：https://github.com/comehop??e/front-end-daily-挑战3、代码解读定义DOM结构、页面背景和容器大小最外层的容器是一个名为.snowflake的
昨晚北京下大雪了。让我们用CSS画出一片雪花，迎接这个洁白而美丽的世界！1.效果预览点击右侧“点击预览”按钮可在当前页面进行预览，点击链接可全屏预览。https://codepen.io/comehop??e/pen/LYEeRBb二、源码下载前端实战系列日常请从github下载所有源码：https://github.com/comehop??e/front-end-daily-挑战3、代码解读定义DOM结构、页面背景和容器大小最外层的容器是一个名为.snowflake的元素，代表6片雪花花瓣，每个
包含5个元素，每个代表雪花上的冰柱。
<跨度><跨度><跨度></span>背景图页面是黑色的，雪花是白色的，给容器画一条黄色的轮廓作为辅助线。雪花图案将绘制在这个黄色虚线框内：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；背景色：黑色；溢出：隐藏；}.snowflake{字体大小：100px；颜色：雪；宽度：4em；高度：4em；大纲:1pxdashedyellow;}效果如下：画6片花瓣，先在1片花瓣中间画一条竖线：div{width:0.1em;高度：2em；背景颜色：currentColor；边界半径：0.05em；}效果如下图：6片花瓣的竖线重叠，合并在一起，看起来只有一条竖线：div{position:absolute;}效果如下图下图：分别旋转每个花瓣，一共有6个花瓣，所以每个花瓣的旋转角度相差60度：div{transform-origin:bottom;变换：旋转（计算（（var（--n）-1）*60deg））;}div：nth-??child（1）{--n：1;}div：nth-??child（2）{--n:2;}div:nth-child(3){--n:3;}div:nth-child(4){--n:4;}div:nth-child(5){--n:5;}div:nth-child(6){--n:6;}效果如下：绘制IcingNext修改花瓣，在花瓣上绘制糖霜。先把top点出来，用中的第一个元素实现：div{display:flex;弹性方向：列；align-items:center;}divspan:nth-child(1){宽度：0.2em;高度：0.2em；背景颜色：currentColor；border-radius:50%;}效果如下图所示：然后添加离点最近的多段线，用第二个元素绘制，这是用一个正方形中的4个边框中的2个来实现的：div跨度：第n个孩子（2）{宽度：0.5em；高度：0.5em；边框：0.1em实心；边框宽度：0.1em；边框样式：无固体固体无;border-radius:0.05em;}效果如下：将折线旋转45度，使其尖端与垂直线重合：divspan:nth-child(2){transform:rotate(45deg);}效果为如下图：添加第二条折线，与上述代码类似，只是将正方形的边长从0.5em缩短为0.4em：divspan:nth-child(3){width:0.4嗯；高度：0.4em；边框：0.1em实心；边框宽度：0.1em；border-style:nonesolidsolid无；边界半径：0.05em；:nth-child(4){宽度：0.3em；高度：0.3em；边框：0.1em实心；边框宽度：0.1em；border-style:nonesolidsolid无；边界半径：0.05em；(45deg);}效果如下图：添加第四条折线：divspan:nth-child(4){width:0.3em;高度：0.3em；边框：0.1em实心；边框宽度：0.1em；border-style:nonesolidsolid无；边界半径：0.05em；transform:rotate(45deg);}效果如下图：你发现上面4条折线的代码有很多重复。组合这4段代码：divspan:nth-child(2),divspan:nth-child(3),divspan:nth-child(4),divspan:nth-child(5){width:var(--side-length);高度：var（--边长）；边框：0.1em实心；边框宽度：0.1em；border-style:nonesolidsolid无；边界半径：0.05em；变换：旋转（45度）；}div跨度：nth-??child（2）{--边长：0.5em；}div跨度：nth-??child（3）{--边长：0.4em；}div跨度:nth-child(4){--side-length:0.3em;}divspan:nth-child(5){--side-length:0.3em;}最后，让第一条折线离center点，这样也可以让雪花的中心更漂亮：divspan:nth-child(2){margin-top:-0.2em;}效果如下：添加动画效果动画效果很简单，就转转吧，让这个雪花旋转一次需要10秒：.snowflake{animation:round10slinearinfinite;}@keyframesround{to{transform:rotate(1turn);}}效果如下：最后删除辅助线：.snowflake{/*outline:1pxdashedyellow;*/}效果如下：大功告成！4、参考flex布局，1.8.1节边框属性border，《CSS3 艺术》节3.1变量var()和表达式calc()，《CSS3 艺术》节7.1变换旋转函数rotate()，《CSS3 艺术》节8.1.2变换origintransform-origin，《CSS3 艺术》第8.2节Animation动画，《CSS3 艺术》第10章
上一篇：js获取属于哪个屏幕的媒体查询
下一篇：html处理文本换行符
最新推荐
猜你喜欢