推荐 原创 视频 Java开发 iOS开发 前端开发 JavaScript开发 Android开发 PHP开发 数据库 开发工具 Python开发 Kotlin开发 Ruby开发 .NET开发 服务器运维 开放平台 架构师 大数据 云计算 人工智能 开发语言 其它开发
Lambda在线 > 瑾谦 > 纯css3制作旋转太极图案

纯css3制作旋转太极图案

瑾谦 2018-02-05

我们现在最后制作出的效果如何。



我们先分析应该如何制作这样一个太极图案。首先外面是一个大圆。


纯css3制作旋转太极图案


其次我们观察太极图案的内部应该如何实现。


我们可以使用两个长方形进行填充。然后给大圆添加overflow:hidden;就能得到两个半圆,一半是黑色一半为白色。



最后就是分别在两个长方形的盒子两端添加圆形。这个太极图案就成功。





html代码


(向上滑动查看内容)

<div class="wrap">

<div class="taici">

<div class="white">

<div class="mr mr1"></div>

</div>

<div class="black">

<div class="mr mr2"></div>

</div>

</div>

  </div>


 

  

css代码

(向上滑动查看内容)

body,div{margin:0;padding:0;}

.taici{

position:relative;

width:300px;

height:300px;

margin:50px auto;

border-radius:50%;

overflow:hidden;

box-shadow:0 0 10px 0;

animation:whirl 6s linear infinite;

}

@keyframes whirl{

100%{

transform:rotate(360deg);

}

}

.white{

position:absolute;

right:0;

width:50%;

height:300px;

}

.white:after{

position:absolute;

top:0;

right:75px;

height:150px;

width:150px;

border-radius:50%;

content:"";

background-color:#fff;

z-index:4;

}

.black{

position:absolute;

left:0;

width:50%;

height:300px;

background-color:#000;

}

.black:after{

position:absolute;

bottom:0;

left:75px;

height:150px;

width:150px;

border-radius:50%;

content:"";

background-color:#000;

}

.mr{

position:absolute;

width:50px;

height:50px;

border-radius:50%;

z-index:9;

}

.mr1{

top:50px;

right:120px;

background-color:#000;

}

.mr2{

bottom:50px;

left:120px;

background-color:#fff;

}


   

版权声明:本站内容全部来自于腾讯微信公众号,属第三方自助推荐收录。《纯css3制作旋转太极图案》的版权归原作者「瑾谦」所有,文章言论观点不代表Lambda在线的观点, Lambda在线不承担任何法律责任。如需删除可联系QQ:516101458

文章来源: 阅读原文

相关阅读

关注瑾谦微信公众号

瑾谦微信公众号:jinqianweb

瑾谦

手机扫描上方二维码即可关注瑾谦微信公众号

瑾谦最新文章

精品公众号随机推荐