CSS3之太极图源代码

　　太极图实现起来很简单，就是把多个标签利用border-radius设置成圆形，然后多个圆利用position定位重叠在一起

　　  代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>太极图</title>
 6     <style type="text/css">
 7         * { 8             margin: 0;
 9             padding: 0;
10         }
11         .circlebox {12             width: 300px;
13             height: 300px;
14             margin: 100px auto;
15             position: relative;
16             animation: move 2s linear infinite;
17         }
18         .circleblack {19             width: 300px;
20             height: 300px;
21             background-color: black;
22             border-radius: 50%;
23         }
24         .circlewhite {25             width: 150px;
26             height: 300px;
27             background-color: white;
28             border-top-right-radius: 150px;
29             border-bottom-right-radius: 150px;
30             position: absolute;
31             top: 0;
32             right: 0;
33         }
34         .circlebb {35             width: 150px;
36             height: 150px;
37             background: black;
38             border-radius: 50%;
39             position: absolute;
40             top: 0;
41             left: 75px;
42         }
43         .circleww {44             width: 150px;
45             height: 150px;
46             background: white;
47             border-radius: 50%;
48             position: absolute;
49             bottom: 0;
50             left: 75px;
51         }
52         .circlebbl {53             width: 40px;
54             height: 40px;
55             background: black;
56             position: absolute;
57             bottom: 55px;
58             left: 130px;
59             border-radius: 50%;
60         }
61         .circlewwl {62             width: 40px;
63             height: 40px;
64             background: #fff;
65             position: absolute;
66             top: 55px;
67             left: 130px;
68             border-radius: 50%;
69         }
70         @keyframes move {71             from {transform: rotate(0deg);}
72             to {transform: rotate(360deg);}
73         }
74     </style>
75 </head>
76 <body>
77     <div class="circlebox">
78         <div class="circleblack"></div>
79         <div class="circlewhite"></div>
80         <div class="circlebb"></div>
81         <div class="circleww"></div>
82         <div class="circlebbl"></div>
83         <div class="circlewwl"></div>
84     </div>
85 </body>
86 </html>

转载于:https://www.cnblogs.com/znh8/p/9383090.html

CSS3之太极图源代码相关推荐

css3 画太极图——用三个div实现
(1)首先,绘制背景: <!doctype html> <html lang="en"><head><meta charset=" ...
8款超牛的jQuery/CSS3应用及源代码
今天我们来分享8款超牛的jQuery/CSS3应用及源代码,相信这些应用插件可以帮助你在前端开发上能帮上很多.一起来看看吧. 1.jquery视差滑块幻灯特效在线演示 / 源码下载 ...
css 右上角翻开动画_27个精致的CSS3动画效果源代码下载
CSS主要用于控制网页的外观,CSS代码可以随意变化网页的布局和网页的内容样式.当CSS3出现以后,更是可以让网页增添了不少动画元素,随着IE6,7的淘汰,手机端的崛起更是让它成熟了许多.CSS3动画 ...
css3 画太极图——用一个div实现
(1)绘制两个半圆: <!DOCTYPE html> <html> <head><meta charset="UTF-8">< ...
css3 实现太极图
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>太极 ...
python画太极图源代码
'''' jsdjsk 创作 '''' import turtle as t t.begin_fill() t.fillcolor('black') t.circle(150, 180) t.circ ...
CSS3实现太极图教程
我们先来看效果: 制作步骤: 1.先画个半圆 .box{ width: 300px;height: 150px;margin: 10em auto;border-width: 150px 0 0 0; ...
超精美页面布局（页面布局与动画原理）
文献种类:项目研发技术文献: <华为官网--"客户端页面"模块>项目研发阶段性总结作者:陈荣基 (图片均属借鉴只有代码原创) 本次任务完成时间:2019年1月16日- ...
【毕业设计】爱琴海——基于HTML5的婚庆用品商城网页设计
一.内容简介 (一)背景与意义 "婚俗"是指结婚的风俗,各国各族人民按照自己的习俗,举行各具特色的婚礼,具有各自浓厚的民族独特风采.婚俗元素在是中国婚俗文化的媒介,承载了中华儿女对 ...

CSS3之太极图源代码

CSS3之太极图源代码相关推荐

最新文章

热门文章