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>
相关推荐
CodeCraft Studio10 小时前
国产化Word处理组件Spire.DOC教程:使用 Python 将 Markdown 转换为 HTML 的详细教程
python·html·word·markdown·国产化·spire.doc·文档格式转换
aaaweiaaaaaa10 小时前
HTML和CSS学习
前端·css·学习·html
xcnn_11 小时前
前端入门——案例一:登录界面设计(html+css+js)
前端·css·html
ST.J11 小时前
前端笔记2025
前端·javascript·css·vue.js·笔记
吃饭最爱13 小时前
html的基础知识
前端·html
前端Hardy14 小时前
HTML&CSS:有趣的漂流瓶
前端·javascript·css
前端Hardy14 小时前
HTML&CSS :惊艳 UI 必备!卡片堆叠动画
前端·javascript·css
toooooop814 小时前
本地开发环境webScoket调试,保存html即用
前端·css·websocket
AlexMercer101215 小时前
[前端]1.html基础
前端·笔记·学习·html
前端Hardy15 小时前
只用2行CSS实现响应式布局,比媒体查询更优雅的布局方案
javascript·css·html