使用css画太极,CSS画太极阴阳图
引言
CSS可以画很多图形,今天我们来画一个特殊的图形——中国古代哲学的“太极图”。
如果没有用CSS画过简单图形,建议先学习如何用border属性画三角形。
构思
步骤
1.在 html 中写一个 div 标签,class 命名为 taiChi 。
复制代码
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;/*匀速转动*/
}
复制代码
预览地址
使用css画太极,CSS画太极阴阳图相关推荐
- html css绘制太极,css画太极阴阳图
前言:道生一,一生二,二生三,三生万物 今天,我们来聊聊如何用 CSS 实现 太极图? 在网上可以找到很多资料,不过我强推荐一个css酷炫效果的网站,我们要实现一个 阴阳图,谷歌搜索关键词:css t ...
- 用css实现一个太极阴阳图,使用多个div块实现
用css实现一个太极阴阳图,使用多个div块实现 下面是HTML代码 <!DOCTYPE html> <html lang="en"> <head&g ...
- 【DIV CSS】代码作业练习DIV CSS太极阴阳图
1. DIV CSS 练习:太极阴阳图. 基本思路:由三个div块元素组成: #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 (太极阴阳图:上为阳下为阴 ...
- 【DIV+CSS】代码作业练习DIV+CSS太极阴阳图
1. DIV + CSS 练习:太极阴阳图. 基本思路:由三个div块元素组成: #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 (太极阴阳图:上为阳下 ...
- [css] 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样
[css] 不使用border画出1px高的线,在不同浏览器的标准和怪异模式下都能保持效果一样 <div style="width: 100%;height: 1px;"&g ...
- [css] 请使用css画一个圆,方法可以多种
[css] 请使用css画一个圆,方法可以多种 <div class="circle"></div>1.border-radius.cirlce{width ...
- [css] 请使用CSS画一个带锯齿形边框圆圈
[css] 请使用CSS画一个带锯齿形边框圆圈 @import 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题
- ARM6818开发板画任意矩形,圆形,三角形,五角星,6818开发板画太极,画五星红旗(含码源与思路)
本文利用6818开发板完成LCD屏上绘制任意的矩形,圆形,三角形或五角星形图案,还有绘制太极,五星红旗的方案. 目录 映射 绘制矩形 代码思路 代码实现 实践出真知 绘制圆形 代码思路 代码实现 绘制 ...
- 画线 css,CSS画线方法
用 标签 最基本的: 其中 width 规定线条的长度,还可以是百分比:color 表示颜色,size 表示厚度: align 规定线条位置,有left(左对齐).right(右对齐).center( ...
- html css画五角星,css画梯形,css画五角星, css画六角星 ,css画六边形
css画梯形,css画五角星, css画六角星 ,css画六边形 css画梯形 .triangle { border-bottom: 100px solid #F36823; border-left: ...
最新文章
- 用Leangoo项目管理软件做技术支持
- 为什么信不过AI看病?数据集小、可靠性差,AI医疗任重道远
- python 的进程池不可嵌套
- 微软推出Python入门课,登上GitHub趋势榜第一
- java 什么是哨兵_Java中的Redis 哨兵高可用性
- android10热点验证身份,在 Android 上使用 Microsoft 进行身份验证
- 转: 深入浅出-网络七层模型
- TS流头部的调整字段
- openstack 重启mysql_openstack 重启服务命令
- 计蒜课挑战难题:罗马数字转换成整数
- 华为海外版操作系统曝光?HUAWEI ARK OS现身
- HelloDjango 启动!免费带你学Django全栈!
- 使用 Eclipse 平台进行调试
- 在Python中如何优雅地处理PDF文件
- 北京理工大学OJ的Mid难度题目的题解
- Xmind如何添加水印
- BZOJ2339[HNOI2011]卡农——递推+组合数
- 55欧式空间02——正交矩阵、欧氏空间的同构
- Jetson TK1 血泪开发记(一)——Jetson TK1初体验
- RabbitMQ面试要点