如何利用CSS3做出精美的样式以及动画（基础篇2）
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：DW/CSS3动画
作者：余智强
撰写时间：2019.1.17
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
CSS是网页设计师和前端人员需要了解和学习的一门语言，特别是现在很多网页使用扁平化设计，这类设计风格大部分布局、交互动画甚至是图标都会使用高级点的CSS3技能，所以我们应该熟练掌握CSS这门样式语言。下面我就分享一下我所掌握的一些CSS3知识（我是新手求轻喷）。
一、八卦图
图一、
图二、
看起来是十分的繁琐，实际上也是十分的繁琐。
<div class="bgj">
<div class="tx"><i></i><i></i><i></i></div>
<div class="tx"><i><d></d></i><i></i><i></i></div>
<div class="tx"><i></i><i><d></d></i><i><d></d></i></div>
<div class="tx"><i><d></d></i><i><d></d></i><i><d></d></i></div>
<div class="tx"><i></i><i></i><i><d></d></i></div>
<div class="tx"><i><d></d></i><i><d></d></i><i></i></div>
<div class="tx"><i><d></d></i><i></i><i><d></d></i></div>
<div class="tx"><i></i><i><d></d></i><i></i></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<div class="x"></div>
<!--<div class="A">（这是太极图）
<div class="b">
<i class="hi"></i>
</div>
<div class="bh"></div>
<div class="hh">
<i class="bi"></i>
</div>
</div>-->
<div class="z">（这是万字符)
<div class="ws"><div class="wh"></div></div>
<div class="ws"><div class="wh"></div></div>
<div class="ws"><div class="wh"></div></div>
<div class="ws"><div class="wh"></div></div>
</div>
</div>具体就是先放一个大的容器级标签（不了解容器级标签的可以看我之前的文章，CSDN个人博客https://blog.csdn.net/weixin_44541467/article/details/86515076），
最外层的框其实只是框，没有实心（更繁琐，但也因此有意外收获。下文会提及）。其实就是八个梯形拼接。要做出梯形的效果，代码如下：
width: 58.6px;
height: 113px;
border-top: 73.3px solid transparent;
border-bottom: 99.3px solid transparent;
border-right: 29.7px solid transparent;
border-left: 29.7px solid transparent;
border-color: black transparent transparent transparent;里面就是八个三角形，再将圆放在中间。
三角形效果制作如下：
width: 0px;
height: 0px;
border:70.5px solid #24222F;
border-right-width:28.5px;
border-left-width: 28.5px;
border-color: #24222F transparent transparent transparent;圆：border-radius: 50%;
外框上的八个卦象是三根长白条，再用黑短条遮在白条该遮的地方形成卦象（卦象可能有错，没有认真考究）。
图一中心的万字符也是由黑条连接，具体就不多讲。
图二的太极图先由一半黑一半白为底，再将一黑一白两个小圆对称放在中界线上就差不多了，最后再将一黑一白两个放进去就行了。
二、意外收获
图一、
width: 57.6px;(梯形css）
height: 113px;
border-top: 72.3px solid transparent;
border-bottom: 99.3px solid transparent;
border-right: 30.7px solid transparent;
border-left: 30.7px solid transparent;
border-color: black transparent transparent transparent;图二、
图三、
display: flex;
width: 485.6px;
height: 91px;
border-top:193.3pxsolid transparent;
border-bottom: 0.3px solid transparent;
border-right: 100.7px solid transparent;
border-left: 100.7px solid transparent;
border-color:black transparent transparent transparent;图四、
width: 160.6px;
height: 126px;
border-top: 29.3px solid transparent;
border-bottom: 28.3px solid transparent;
border-right: 11.7px solid transparent;
border-left: 11.7px solid transparent;
border-color:blacktransparenttransparent transparent;
这四张图就是八个梯形的衍生物了（还有很多有趣的图，各位小伙伴们可以自己改变哦），这是通过改变梯形的高度、宽度与四边边框的宽度比例产生的。
好了，本文就到此结束（我是小白求轻喷）。