html 太极样式

太极 + 炫光

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>太极</title>
	</head>
	<style>
	        @keyframes myRote {
	            from {
	                transform: rotate(0deg);
	            } to {
	                transform: rotate(360deg);
	            }
	        }
	        body {
	            background-color: #999;
	        }
	        .box {
	            width: 0px;
	            height: 300px;
	            border-left: 150px solid #000000;
				border-right: 150px solid #FFFFFF;
	            border-radius: 50%;
	            position: relative;
	            animation: myRote 4s linear infinite;
				box-shadow: 0 0 8px 2px rgb(147, 204, 232);

	        }
	        .box::before {
	            content: "";
	            display: block;
	            width: 50px;
	            height: 50px;
	            border: 50px solid #000000;
	            background-color: #FFFFFF;
	            border-radius: 50%;
	            position: absolute;
	            left: -75px;
	        }
	        
	        .box::after {
	            content: "";
	            display: block;
	            width: 50px;
	            height: 50px;
	            border: 50px solid #FFFFFF;
	            background-color: #000000;
	            border-radius: 50%;
	            position: absolute;
	            top: 150px;
	            left: -75px;
	        }
	    </style>
	<body>
	    <div class="box">
	
	    </div>
	</body>
</html>
相关推荐
石金龙6 小时前
[译] Composition in CSS
前端·css
天天扭码7 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153177 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
葡萄城技术团队13 小时前
所有网站通用:6 行 HTML 代码搞定页面加载提速
html
糖糖TANG15 小时前
从零开始制作我的第一个静态网页——教师节主题首页开发记录
html
会豪15 小时前
CSS 动画属性精讲:从基础到实战
前端·css
前端Hardy1 天前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy1 天前
HTML&CSS:好精致的导航栏
前端·javascript·css
前端老鹰1 天前
HTML <output> 标签:原生表单结果展示容器,自动关联输入值
前端·html
墨渊君1 天前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css