《前端每日实战》作品第175号：纯CSS绘制的阴阳图案

其次，定义容器并将页面背景设置为浅灰色。正文{保证金：0;高度：100vh；background-color:lightgrey;}定义容器的大小为正方形，使用相对单位em。为了看到容器所占用的空间，临时用白色填充容器。身体{显示：flex;对齐项目：居中；证明内容：居中；}.yin-yang{width:10em;高度：10em；字体大小：20px；background-color:white;}效果如下：3、阴阳图案的组合把刚才临时设置的background-color属性注释掉，设置容器的背景色为锐利的线性渐变，分割容器的背景有两种颜色。因为后面会用到这两种颜色，所以用变量--color1和--color2来表示，方便复用。阴阳纹本来就是黑白的。在开发阶段，为了方便观察，我们暂时用番茄和橘子代替。.yin-yang{/*background-color:white;*/--color1:tomato;--color2：橙色；background-image:linear-gradient(var(--color1)50%,var(--color2)50%);}效果如下：接下来画中间的图案，先画左边的，实现带有一个伪元素。它的背景色是变量--color1的颜色，通过flex布局垂直居中。mix-blend-mode属性的作用是防止伪元素的颜色混合在一起，因为和背景色完全一样而无法区分。这称为“混合模式”。有兴趣的同学可以参考MDN文档，自己试验各种模式的取值效果。.yin-yang{显示：flex;align-items:center;}.yin-yang::before{内容：'';宽度：50%；高度：50%；背景色：var(--color1);mix-blend-mode:screen;}效果如下：为伪元素设置粗边框，边框使用变量--color2的颜色。.yin-yang::before{box-sizing:border-box;border:1.5emsolidvar(--color2);}效果如下图：现在看起来是正方形的元素，过一会就变圆了。如果你赶时间，可以添加border-radius:50%;属性看看效果。接下来将::before伪元素的效果复制到::after伪元素中，直接在伪元素选择器中添加.yin-yang::after。这两个伪元素的区别在于它们的颜色是相反的，所以我们将它们的颜色属性值分别定义为--inner-color和--outer-color，分别指的是内边框和外边框的颜色的元素。.yin-yang::before,.yin-yang::after{background-color:var(--inner-color);border:1.5emsolidvar(--outer-color);}.yin-yang::before{--inner-color:var(--color1);--outer-color:var(--color2);}.yin-yang::after{--inner-color:var(--color2);--outer-color:var(--color1);}效果如下图：4.撤消辅助属性并给它们上色，现在变成圆形。.yin-yang,.yin-yang::before,.yin-yang::after{border-radius:50%;}效果如下图：取消颜色混合模式属性mix-blend-mode用于辅助开发。.yin-yang::before,.yin-yang::after{/*mix-blend-mode:screen;*/}效果如下图：将配色方案改为黑白。至此，阴阳图的静态布局就完成了。.yin-yang{/*--color1：番茄；--color2:橙色;*/--color1:白色;--color2：黑色；box-shadow:001emrgba(0,0,0,0.3);}效果如下图：5.增加动画效果最后添加一个旋转动画来描述阴阳消长的意思与流动，相互转化，动态平衡，无限舒展。.yin-yang{animation:旋转线性5s无限;}@keyframes旋转{to{transform:rotate(1turn);}}你完成了！关于作者张欧佩，网络笔名@comehop??e，20世纪末接触互联网，被网络的无限魅力所俘虏。此后，他一直战斗在Web开发的第一线。《前端每日实战》栏是我这几年的项目式学习笔记。它使用项目驱动学习来展示从灵感到代码实现的完整过程。也可以作为前端开发的实践练习和开发参考。我的书《CSS3 艺术》由人民邮电出版社于2020年1月出版，全彩印刷。以100多个生动优美的实例，系统分析了与视觉效果相关的CSS重要语法，并附有近10小时的视频演示讲解。京东/天猫/当当网均有售。