css3绘制八卦图及动画效果

#麻辣小龙虾#

已于 2023-04-18 10:14:43 修改

阅读量3.7k

点赞数

分类专栏： web前端 CSS3 文章标签： css3 动画

于 2017-04-10 22:52:18 首次发布

本文链接：https://blog.csdn.net/CodingNoob/article/details/70039046

版权

web前端同时被 2 个专栏收录

99 篇文章 2 订阅

订阅专栏

CSS3

20 篇文章 0 订阅

订阅专栏

原理很简单，就是外面加个盒子box。作为旋转动画的box，然后里面分别利用两个div使用css3的 border-radius绘制半圆，分别定位在上下中间对齐两个位置，里面在放两个小的原点水平和垂直方向对齐即可实现。然后在使用Css3的animation属性制作动画。效果如下图。
这里写图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>css3绘制八卦图及动画效果</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .box {
            margin: 100px auto;
            width: 400px;
			height:400px;
			border-radius:200px;
			box-shadow:0 0 10px #999;
			position:relative;
			animation:circleRotate 3s linear 2s infinite;
        }
		.semi-circle{
			height:400px;
			width:200px;
		}
        .box .left{
			background:#000;
			border-top-left-radius:200px;
			border-bottom-left-radius:200px;
		}
		
		.box .right{
			background:#fff;
			border-top-left-radius:200px;
			border-bottom-left-radius:200px;
		}
		.box .top-circle{
			position:absolute;
			left:100px;
			top:0;
			height:200px;
			width:200px;
			text-align:center;
			line-height:200px;
			border-radius:100px;
			background:#000;
		}
		.box .bottom-circle{
			position:absolute;
			left:100px;
			bottom:0;
			height:200px;
			width:200px;
			text-align:center;
			line-height:200px;
			border-radius:100px;
			background:#fff;
		}
		.box .small-circle{
			display:inline-block;
			height:40px;
			width:40px;
			border-radius:20px;
			background:red;
		}
		.box .white{background:#fff;}
		.box .black{background:#000;}
		@keyframes circleRotate{
			%0{
				transform:rotate(0deg);
			}
			100%{
				transform:rotate(360deg);
			}
		}
    </style>
</head>

<body>
    <div class="box">
		<div class="semi-circle left"></div>
		<div class="semi-circle right"></div>
		<div class="top-circle">
			<span class="small-circle white"></span>
		</div>
		<div class="bottom-circle">
			<span class="small-circle black"></span>
		</div>
    </div>
</body>

</html>