如何利用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;
这四张图就是八个梯形的衍生物了(还有很多有趣的图,各位小伙伴们可以自己改变哦),这是通过改变梯形的高度、宽度与四边边框的宽度比例产生的。
好了,本文就到此结束(我是小白求轻喷)。