CSS画太极阴阳图

引言

CSS可以画很多图形,今天我们来画一个特殊的图形——中国古代哲学的“太极图”。 如果没有用CSS画过简单图形,建议先学习如何用border属性画三角形。

构思

步骤

1.在 html 中写一个 div 标签,class 命名为 taiChi 。

<div class="taiChi"></div>
复制代码

2.假设我们想画一个宽高为100px太极图,border 的粗细为2px,由于 border 的粗细占位4px,此时宽高已经变成了96px。关于 border-radius 请查看 MDN 文档。以下代码画出一个圆形。
.taiChi {
    background: #fff;
    width: 96px;
    height: 96px;
    border-color: black;
    border-style: solid;
    border-width: 2px;
    border-radius: 100%;
}
复制代码

3.加粗右 border,以实现填充太极图右侧为黑的状态。border-width:2px更改为border-width:2px 50px 2px 2px,效果如下图显示。


4.用 伪元素 before 和 after 画出两个小圆。定位要用 position 属性来设置两个小圆的位置,白色小圆距顶部为0,左右处于居中位置,此时 left 设置为50%。黑色小圆距底部为0,左右也处于居中位置,left 也设置为50%。宽、高、背景色和border粗细参考构思部分的设计图。

.taiChi:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: #000;
    border: 18px solid white;
    top: 0;
    left: 50%;
    border-radius: 100%;
}

.taiChi:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 18px solid black;
    left: 50%;
    bottom: 0;
    border-radius: 100%;
}
复制代码

看似复杂的太极图就画好了~

5.转起来(拓展)

keyframes animation 用法参考MDN,转起来请修改以下代码。

@keyframes spin {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }    
}

.taiChi{
    background:#fff;
    width:48px;
    height:96px;
    border-color:black;
    border-style:solid;
    border-width:2px 50px 2px 2px;
    border-radius:100%;
    position:relative;
    animation-duration: 3s;/*每3s转一圈*/
    animation-name: spin;
    animation-iteration-count: infinite;/*无限制循环*/
    animation-timing-function: linear;/*匀速转动*/
}
复制代码

预览地址

demo地址

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值