上期教了大家使用css画圆,这次加点艺术性,画一个会旋转的太极.
画出轮廓
<div class="box"></div>
设置轮廓的样式
.box {
/*宽高500px*/
width: 500px;
height: 500px;
/*边框圆角 50%*/
border-radius: 50%;
/*利用外边距左右auto实现页面水平居中*/
margin: 40px auto;
/*边框,(先加上确定位置,成型后可删可不删)*/
border: 1px solid #000;
/* 轮廓的样式 */
}
然后呢,我们可以得到一个很大的圆.
圆轮廓.png
之后我们需要画出两个半圆
画出半圆
注意,由于半圆在轮廓里面,所以我们需要将半圆画在轮廓里.
html代码
<div class="box">
<!-- .box 轮廓 -->
<div class="black">
<!-- .black 黑色的半圆 -->
</div>
<div class="white">
<!-- .white 白色的半圆 -->
</div>
</div>
css样式
/*因为两个半圆的一些样式一致,所以可以采用并集选择器来同时设置样式*/
.black,
.white {
width: 250px;
height: 500px;
/* 半圆共同样式 */
}
.black {
/*背景颜色*/
background: black;
/*边框原角,当其是四个值的时候可以这样设置 border-radius:左上 右上 右下 左下; */
/*由于高是500px,所以只需要两个角各卷曲高的一半即可*/
border-radius: 250px 0px 0px 250px;
/* 黑色半圆样式 */
}
.white {
/*因为div是块级元素,独占一行,因此这个半圆采用定位会更加方便一些.*/
/*半圆是轮廓的子元素,所以我们可以使用'子绝父相'的定位方法. absolute 为绝对定位*/
position: absolute;
/*距离上面为0px*/
top: 0px;
/*距离右边为0px*/
right: 0px;
/*加上右上右下的边框圆角*/
border-radius: 0px 250px 250px 0px;
/* 白色半圆样式 */
}
同时父级元素(轮廓)需要加一个相对定位
css样式
.box {
width: 500px;
height: 500px;
border-radius: 50%;
margin: 40px auto;
border: 1px solid #000;
/*加上相对定位*/
position: relative;
/* 轮廓的样式 */
}
这样设置完后我们就得到黑白分明的圆了
黑白.png
这一步做完之后我们相当于完成一半了,下一步我们为其加上中间的弧形分割线
html代码
<div class="box">
<!-- .box 轮廓 -->
<div class="black">
<!-- .black 黑色的半圆 -->
<div class="circle1">
<!-- .circle1 黑色部分延伸出来的中等圆 -->
</div>
</div>
<div class="white">
<!-- .white 白色的半圆 -->
<div class="circle2">
<!-- .circle2 白色部分延伸出来的中等圆 -->
</div>
</div>
</div>
我们仍然采用画圆的方法构建出弧形,因为是一个中型的圆,因此我们在两个半圆的里面各加上一个中等圆,然后设置背景色样式.
css样式
.circle1,
.circle2 {
width: 250px;
height: 250px;
/*边框圆角,因为背景色与父级半圆一致,所以我们没必要设置成半圆,直接设置成圆形即可*/
border-radius: 50%;
/*绝对定位*/
position: absolute;
/* 中型圆的共同样式 */
}
.circle1 {
/*背景颜色:黑色*/
background: black;
top: 0px;
/*距离左边125px,也就是让半圆移出自身一半的身位出去*/
left: 125px;
/* 黑色中型圆 */
}
.circle2 {
/*背景颜色:白色*/
background: white;
/*因为白球存在于下面,所以要距离上面250px,整个轮廓的一半距离,或者距离下面为0px也是可行的*/
/* bottom: 0px; 距离下面为0px*/
top: 250px;
/*距离右边125px,也就是让半圆移出自身一半的身位出去*/
right: 125px;
/* 白色中型圆 */
}
做完这些,我们就拿到了一个太极的雏形啦~!下一步便是点金之笔 !
太极雏形.png
下一步我们需要在两个中型圆中添加两个中心小圆
html代码
<div class="box">
<!-- .box 轮廓 -->
<div class="black">
<!-- .black 黑色的半圆 -->
<div class="circle1">
<!-- .circle1 黑色部分延伸出来的中等圆 -->
<div class="ball b1"></div>
<!-- .b1 黑色中的白色小园 -->
</div>
</div>
<div class="white">
<!-- .white 白色的半圆 -->
<div class="circle2">
<!-- .circle2 白色部分延伸出来的中等圆 -->
<div class="ball b2"></div>
<!-- .b2 白色中的黑色小圆 -->
</div>
</div>
</div>
大家可能注意到,我的小圆类名有两个,在类名的命名中使用空格分隔,就相当于这个标签拥有两个类名啦!!
css样式
.ball {
width: 50px;
height: 50px;
/* 边框圆角 50% */
border-radius: 50%;
/* 绝对定位 */
position: absolute;
/* 向上距离50% 这个50%是指父级定位的高长度的百分之50% */
top: 50%;
/* 向左距离50% 这个50%是指父级定位的宽长度的百分之50% */
left: 50%;
/* 巧妙的运用一下外边距负值,可以实现意想不到的效果哦! */
/* 外边距: 上,右,下,左; */
margin: -25px 0px 0px -25px;
/* 中心圆样式 */
}
.b1 {
/* 添加背景颜色:白色 */
background: white;
}
.b2 {
/* 添加背景颜色:黑色 */
background: black;
}
ヾ(๑╹◡╹)ﾉ"锵锵!!!这下我们就画出了一个完美的太极啦!!
太极.png
当然,光是这些我并不满意! 我还要让它转起来!这时候就要用上好玩的动画效果啦!
由于后面没有html的事了,所以直接css代码!
css样式
.black,
.white {
width: 250px;
height: 500px;
/*看看这里!! 我们需要给两个半圆添加动画属性!*/
/*动画: 动画的名字 动画持续的时间 运动曲线(方式) 次数*/
/*这里我写的是,给动画取名叫TJ,一个动画周期为6秒(秒数越小速度越快哦!),匀速运动,无限循环*/
animation: TJ 6s linear infinite;
/* 半圆共同样式 */
}
.black {
background: black;
border-radius: 250px 0px 0px 250px;
/*!!这里也要投来你们的目光!!*/
/*我们需要将两个半圆旋转,所以要设置旋转的原点,写法为:原点:x轴位置 y轴位置;
因为原点默认在左上角,所以我们需要让它到太极的中心,因此有了下面的设置*/
/*因为这是左半圆,所以需要x轴靠右,y轴居中.*/
transform-origin: right center;
/* 黑色半圆样式 */
}
.white {
position: absolute;
top: 0px;
right: 0px;
border-radius: 0px 250px 250px 0px;
/*这里也是设置原点,x轴靠左,y轴居中.*/
transform-origin: left center;
/* 白色半圆样式 */
}
/*这里是动画执行的效果*/
/* @keyframes后面加上我们的动画名字*/
@keyframes TJ {
/* 开始的状态*/
from {
/*改变:旋转() deg是度数*/
/*因为是刚开始的状态,所以让它默认就好啦,什么都不需要改变*/
transform: rotate(0deg);
}
to {
/*结束的状态,这个时候我们就要给它设置360度了,因为这样我们才能让太极动起来*/
transform: rotate(360deg);
}
}
/* 半圆动画 */
这些设置完后,我们就可以看见一个慢慢旋转的太极了!
这里我觉得样式还可以加些自己喜欢的效果,所以我给轮廓加上了阴影,去掉了边框
.box {
width: 500px;
height: 500px;
border-radius: 50%;
margin: 40px auto;
/* border: 1px solid #000;*/
position: relative;
/* 盒子阴影 */
/*盒子阴影:模糊距离,颜色黑色*/
box-shadow: 0px 0px 20px 0px #000000;
/* 轮廓的样式 */
}
旋转太极.png
下面附上完整代码
html代码
<body>
<div class="box">
<!-- .box 轮廓 -->
<div class="black">
<!-- .black 黑色的半圆 -->
<div class="circle1">
<!-- .circle1 黑色部分延伸出来的中等圆 -->
<div class="ball b1"></div>
<!-- .b1 黑色中的白色小园 -->
</div>
</div>
<div class="white">
<!-- .white 白色的半圆 -->
<div class="circle2">
<!-- .circle2 白色部分延伸出来的中等圆 -->
<div class="ball b2"></div>
<!-- .b2 白色中的黑色小圆 -->
</div>
</div>
</div>
</body>
css样式
<style>
.box {
width: 500px;
height: 500px;
border-radius: 50%;
margin: 40px auto;
position: relative;
box-shadow: 0px 0px 20px 0px #000000;
/* 轮廓的样式 */
}
.black,
.white {
width: 250px;
height: 500px;
animation: TJ 6s linear infinite;
/* 半圆共同样式 */
}
.black {
background: black;
border-radius: 250px 0px 0px 250px;
transform-origin: right center;
/* 黑色半圆样式 */
}
.white {
position: absolute;
top: 0px;
right: 0px;
border-radius: 0px 250px 250px 0px;
transform-origin: left center;
/* 白色半圆样式 */
}
@keyframes TJ {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 半圆动画 */
.circle1,
.circle2 {
width: 250px;
height: 250px;
border-radius: 50%;
position: absolute;
/* 中型圆的共同样式 */
}
.circle1 {
background: black;
top: 0px;
left: 125px;
/* 黑色中型圆 */
}
.circle2 {
background: white;
top: 250px;
right: 125px;
/* 白色中型圆 */
}
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0px 0px -25px;
/* 中心圆样式 */
}
.b1 {
/* 添加背景颜色:白色 */
background: white;
}
.b2 {
/* 添加背景颜色:黑色 */
background: black;
}
</style>
讲完了,٩(๑>◡<๑)۶ 谢谢观赏!!!
