大家好，好久没有发表《前端每日实战》的作品了，今天是2020的第一天，终于再次启程，我将继续践行PBL（Project-basedLearning）学习法，并将学习笔记分享给大家，交流讨论，共同进步。在这段没有作品发表的时间里，在人民邮电出版社的支持和帮助下，我写了一本书，取名为《CSS3 艺术》，是在《前端每日实战》的一百多部作品中诞生的。、边框、背景、阴影、裁剪、滤镜、混色、变量、计数器、变换、缓动、动画整理总结，希望能为大家学习CSS提供一些帮助。本书已于近期上市，京东、天猫、当当网均可购买。接下来，进入正题。今天的项目是用纯CSS制作一个2020年的样式图案，并在上面添加一点动画效果。效果预览按右侧“点击预览”按钮可在当前页面进行预览，点击链接可全屏预览。https://codepen.io/comehop??e/pen/jOEGzZx代码解读1.基本dom结构和页面背景dom结构的最外层使用元素表示这是一张图片：页面使用深红色背景，使用网格布局：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；背景颜色：深红色；}图形{显示：网格；grid-template-columns:repeat(8,1em);网格模板行：重复（3、1em）；字体大小：60px；color:whitesmoke;}网格布局比定位布局更语义化，同样的布局结果，网格布局的代码量明显少于定位布局。该项目创建一个3行8列的网格。为了清晰的看到网格线，我们添加了一些辅助线，工作完成后将被删除：figure{background-image:linear-gradient(tobottom,transparent0%,transparent99%,pink100%)，线性渐变（向右，透明0%，透明99%，粉红色100%），线性渐变（向顶部，透明0%，透明99%，粉红色100%），线性渐变（向左，透明0%,透明99%,粉红色100%);背景大小：1em1em；background-repeat:repeat,repeat,repeat-x,repeat-y;}效果如下图：2.绘制数字2在dom中添加与数字2相关的元素，数字2被分割分为4个部分：将这4个部分分别放在网格对应的位置，grid-area的属性x/y分别代表最上面的网格线数和左边的网格线数分别。网格线从1开始编号，以.part4为例，其最上面的网格线从第3条开始算起，左边的网格是从左数第二条，所以它的属性值为3/2：.two{background-color:currentColor;}.two.part1{grid-area:1/1;}.two.part2{grid-area:2/2;}.two.part3{grid-area:3/1;}.two.part4{grid-area:3/2;}效果如下：接下来是每个的形状部分都变成了扇形，border-radius属性有4个值，分别代表左上角、右上角、右下角、左下角值。以.part4为例，它是一个左下角圆角的扇区，所以它的属性值为000100%：.two.part1{grid-area:1/1;border-radius:100%000;}.two.part2{grid-area:2/2;border-radius:00100%0;}.two.part3{grid-area:3/1;border-radius:100%000;}.two.part4{grid-area:3/2;border-radius:000100%;}效果如下图所示：此时已经绘制了一个数字2，另外一个数字2不需要添加dom元素，复制第一个元素即可.这里我们使用drop-shadow()函数，它的两个参数代表复制后的偏移量，这里的参数值为4em0，即水平方向向右平移4em，垂直方向不变:.two{filter:drop-shadow(4em0);}效果如下图所示：至此，两个数字2已经绘制完成3、绘制数字0，在dom中添加与数字0相关的元素。与数字2不同，每个数字0只需要1个dom元素，所以2个数字0需要2个dom元素：在格子中定位两个数字0，仍然使用grid-area参数，但是它们的属性值为4个数字，最后2个数字代表最下面格子的数字线和右网格线的数量分别。可以看出每个0占2*2的网格区域：.zero.copy-1{grid-area:2/3/4/5;}.zero.copy-2{grid-area:2/7/4/9;}画出数字0的粗略轮廓，这里是使用border属性绘制的，元素本身宽高为0，但是有1em的边框。上下边框为白色，左右边框为透明。注意border在css中不一定是以线的形式存在，这里的每一个border都是一个三角形。:.zero{宽度:0;高度：0；边框：1em实心；border-color:currentColortransparent;}效果如下图：添加圆角效果：.zero{border-radius:50%;}效果如下：Tilt45degrees:.zero{transform:rotate(-45deg);}效果如下图：至此，两个数字0也被画出来了。4.添加新年快乐的文字在dom中添加相关的文字元素，一共3个词，用3个元素表示：快乐newyear效果如下图所示。可以看到这三个词都重叠在第一行的第二个格子里。这是因为未指定的grid-area属性会自动设置在网格布局元素下，这些元素排列在一个未被占用的网格中：接下来为3个文本元素设置它们的网格位置：.text.happy{grid-area:1/2;}.text.new{grid-area:2/4;}.text.year{grid-area:1/6;}效果如下图：接下来设置文字的样式，改变文字大写字母，粗体，并使用花哨的字体，以免与左边的图案过于接近混淆，然后在文本的左侧添加一点填充：.text{text-transform:uppercase;字体大小：0.66em；行高：1.5em；字体粗细：粗体；字体系列：草书；padding-left:0.25em;}效果如下图：至此，文字绘制完成。5.增加动画效果。因为数字0的形状太抽象了，我们让数字0旋转。动画很简单，就是以每圈4秒的速度连续旋转。因为之前设置数字0旋转45度，所以动画的tokeyframe应该加上45度，旋转度数为负值，表示逆时针旋转：.zero{animation:round4slinearinfinite;}@keyframesround{to{变换：旋转（计算（-45deg+-1turn））;}}效果如下图所示：但是，我们可以看到左边的数字0在翻过来的时候遮住了文字“new”。"重叠时，重叠的部分会变黑：.text{mix-blend-mode:difference;}效果如下：至此，全部工作完成，最后删除辅助线：figure{/*background-图像：线性渐变（到底部，透明0%，透明99%，粉色100%），线性渐变（到右边，透明0%，透明99%，粉色100%），线性渐变（到顶部，transparent0%%,transparent99%,pink100%),linear-gradient(toleft,transparent0%,transparent99%,pink100%);background-size:1em1em;background-repeat:重复，重复，重复-x,repeat-y;*/}效果如下：完整的CSS代码如下：body{margin:0;height:100vh;display:flex;对齐项目：居中；证明内容：居中；背景颜色：深红色；}图形{显示：网格；网格模板列：重复（8、1em）；网格模板行：重复（3、1em）；字体大小：60px；颜色：whitesmoke;}.two{背景颜色：currentColor;filter:drop-shadow(4em0);}.two.part1{grid-area:1/1;border-radius:100%000;}.two.part2{grid-area:2/2;border-radius:00100%0;}.two.part3{grid-area:3/1;border-radius:100%000;}.two.part4{grid-area:3/2;border-radius:000100%;}.zero.copy-1{grid-area:2/3/4/5;}.zero.copy-2{grid-area:2/7/4/9;}.zero{宽度：0;高度：0；边框：1em实心；边框颜色：currentColor透明；边界半径：50%；变换：旋转（-45deg）；动画：圆形4s线性无限；}@keyframes圆形{到{变换：旋转（计算（-45deg+-1turn））;}}.text.happy{grid-area:1/2;}.text.new{grid-area:2/4;}.text.year{grid-area:1/6;}.text{text-transform:上层酶;字体大小：0.66em；行高：1.5em；字体粗细：粗体；字体系列：草书；左填充：0.25em；mix-blend-mode:difference;}参考网格布局，《CSS3 艺术》1.8.2节；drop-shadow()函数，《CSS3 艺术》5.2节；border-radius扇形，《CSS3 艺术》第3.3.3节；border-radiusflowershape,《CSS3 艺术》Section3.3.5Section;动画动画，《CSS3 艺术》第10话；mix-blend-mode颜色混合模式，《CSS3 艺术》6.3.3节
