网络安全检测|网络安全服务|网络安全扫描-香港墨客投资移动版

主页 > 业界资讯 > 网络渗透测试

CSS画太极图的方法

时间:2022-12-07 18:13  来源:网络整理   作者:采集插件   点击:次

前两天发了两篇关于CSS画图形的方法，今天就有QQ咨询能不能用CSS画个太极图出来，自己试验了一下。发现CSS画张太极图的图案非常的简单，实现代码如下。

CSS画太极图的方法

css画太极太只需要一个DIV元素即可，不过要用到这个div元素的伪类。代码在下自己看下吧！

<!--feiniaomy.com--> <style>     .m{         width: 100px;         height: 100px;         background-color: #ccc;         padding: 10px;     }     #taiji {         width: 96px;         height: 48px;         background: #fff;         border-style: solid;         border-width: 0px 0px 50px 0px;         border-radius: 100%;         position: relative;     }     #taiji:before {         content: "";         position: absolute;         top: 50%;         left: 0;         background: #fff;         border: 18px solid #000;         border-radius: 100%;         width: 12px;         height: 12px;     }     #taiji:after {         content: "";         position: absolute;         top: 50%;         left: 50%;         background: #000;         border: 18px solid #fff;         border-radius: 100%;         width: 12px;         height: 12px;     } </style> <div class="m">     <div id="taiji"></div> </div>

实现效果

CSS画太极图并旋转的方法

上面的例子给出了CSS如何画太极图的方法，但是画出来的太极图是静止的，如何让它旋转起来呢？让太极图旋转起来，我们只需要加上一个动画效果即可！

修改上面的CSS代码如下：

#taiji {     width: 96px;     height: 48px;     background: #fff;     border-style: solid;     border-width: 0px 0px 50px 0px;     border-radius: 100%;     position: relative;     animation:rotation 2.5s linear infinite;     -webkit-animation:rotation 2.5s linear infinite;     -moz-animation:rotation 2.5s linear infinite; } /*省略代码参考上面例子*/ @keyframes rotation {     0% {transform:rotate(0deg);}     100% {transform:rotate(-360deg);} } @-webkit-keyframes rotation {     0% {-webkit-transform:rotate(0deg);}     100% {-webkit-transform:rotate(-360deg);} } @-moz-keyframes rotation {     0% {-moz-transform:rotate(0deg);}     100% {-moz-transform:rotate(-360deg);} }

实现效果

(责任编辑：admin)
    最近关注
    热点内容