CSS3实现太极图教程

我们先来看效果：

制作步骤：

1、先画个半圆

 .box{ width: 300px;height: 150px;margin: 10em auto;border-width: 150px 0 0 0;border-style: solid;border-color: #000;border-radius: 50%;position: relative;animation: taiji 1.5s linear infinite}

2、画左边的圆

这里为了节省标签就直接用伪类了

 .box:before{ content: ""; position: absolute;top: -75px; left: 0; width: 45px;height: 45px; background: #000;border: 52.5px solid #fff;border-radius: 50%;}

3、画右边的圆

 .box:after{ content: ""; position: absolute; top: -75px; right: 0; width: 45px; height: 45px; background: #fff;border: 52.5px solid #000;border-radius: 50%;}

4、在加个动画就完美了

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

完整代码：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>小鑫博客</title><style>.box{ width: 300px;height: 150px;margin: 10em auto;border-width: 150px 0 0 0;border-style: solid;border-color: #000;border-radius: 50%;position: relative;animation: autoplay 1.5s linear infinite}.box:before{ content: ""; position: absolute;top: -75px; left: 0; width: 45px;height: 45px; background: #000;border: 52.5px solid #fff;border-radius: 50%;}.box:after{ content: ""; position: absolute; top: -75px; right: 0; width: 45px; height: 45px; background: #fff;border: 52.5px solid #000;border-radius: 50%;}@keyframes autoplay {from {transform: rotate(0deg)}to {transform: rotate(360deg)}}</style>
</head>
<body><div class="box"></div>
</body>
</html>

这里我在补充一点：如果要改左右的圆心的大小是要计算的 盒子的高度 - 伪类的边框 x 2 = 圆心的大小

CSS3实现太极图教程相关推荐

css3自学教学,css3精通学习教程(全).pdf
css3精通学习教程(全) CSS3精通教程 (详细) 说明:本教程由个人通过网络资料整理,如存在侵权内容,请读者立即删除. 本教程实例资料请联系QQ:2237993760下载,谢谢! 第章初始 ...
HTML5+CSS3网站设计教程 (张晓景,胡克) [iso]
<HTML5+CSS3网站设计教程>系统地讲解了CSS的基础理论和实际运用技术,并结合多个案例讲解了采用CSS与层布局相结合制作网页的方法,在详细讲解各个案例的制作中,不仅介绍了CSS样式 ...
html5样式表,CSS3+HTML5_css,css3,html5,html5教程_html5,css,css3-站长之家
CSS 3 + HTML 5 是未来的 Web,它们都还没有正式到来,虽然不少浏览器已经开始对它们提供部分支持.本文介绍了 5 个 CSS3 技巧,可以帮你实现未来的 Web,不过,这些技术不应该用在 ...
css3 画太极图——用三个div实现
(1)首先,绘制背景: <!doctype html> <html lang="en"><head><meta charset=" ...
html div 阴影效果,前端基础教程 CSS丨css3 文本阴影效果教程
大家都知道,现在普遍通用的就是 HTML5 和 CSS3 了,今天就带大家看看 CSS3 的效果. CSS3 文本效果 CSS3中包含几个新的文本特征.下面苏苏老师会给大家讲解以下文本属性: text ...
html绘制头像原样教程,CSS实例教程：创意CSS3头像展示教程
今天就为大家分享一个非常有创意的CSS3头像展示效果,交互性强,是一个基于css3和js来实现的,代码量不多,但是最终的效果却很让人赞叹,所以特别推荐给大家.其中关于本示例的一些css样式呈现,个人认 ...
【教程】超漂亮的CSS3按钮制作教程
利用CSS3属性制作按钮,我们只需要用到Gradient属性,不用使用任何图片素材和JavaScript代码,仅仅通过CSS就能制作出好看的渐变按钮.按钮的大小可以通过CSS属性就能轻松的修改,而且 ...
html5中单选按钮的互斥应该,HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单...
## 本教程案例在线演示 ## 教程配套源码资源 ### 表格 table标签(表格). tr标签(行). td标签(标准单元格). caption标签(标题). th标签(表头单元格). 为了更深一 ...
百度页面的html5结构,HTML5+CSS3网站设计基础教程
HTML5与CSS3是下一代Web应用技术的基础,使互联网进入了一个崭新的时代.本书从HTML5和CSS3的基础知识入手,重点讲解HTML5和CSS3新增功能和最新前端技术,通过大量实例对HTML5和 ...

CSS3实现太极图教程

我们先来看效果：

制作步骤：

1、先画个半圆

2、画左边的圆

3、画右边的圆

4、在加个动画就完美了

CSS3实现太极图教程相关推荐

最新文章

热门文章