CSS多重背景和背景图像定位属性绘制太极图

作者: 漆家洲 分类: CSS3,建站知识 发布时间: 2018-05-16 09:53 浏览次数:389

很多时候不是技术做不到,而是我们缺乏思考和对技术的熟练应用。

CSS的多重背景功能可以让用户使用多个背景(可以是图片,也可以是色彩)来填充元素,利用背景定位background-position属性可以对背景图片定位。本人将利用CSS的多重背景和渐变方法来制作一个太极图。

先上一个太极图的拆分图:

设计思路:太极图可有1个白色小圆(1),1个黑色小圆(2),1个黑色大圆(3),一个白色大圆(4),一个左黑右白的大圆(5)组成。其中,1,2,3,4使用径向渐变,5用线性渐变。

实操代码部分:
1.html:
<div class="Taiji"></div>
2.CSS:
.Taiji{
width: 200px; height: 200px;
position: absolute;
top: 50%;left: 50%;
transform:translate(-50%, -50%) ;
transform-origin: 0 0;
box-shadow:0 0 20px #000;
border-radius:50%;
background-image:radial-gradient(#000 12.5px, transparent 12.5px),
radial-gradient(#fff 12.5px, transparent 12.5px),
radial-gradient(#fff 50px, transparent 50px),
radial-gradient(#000 50px, transparent 50px),
linear-gradient(90deg,#000 100px, #fff 100px);
background-position:center 50px,center -50px,center 50px,center -50px,0 0;}

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!