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>
相关推荐
Sherry0073 小时前
【译】 CSS 布局算法揭秘:一次思维转变,让 CSS 从玄学到科学
前端·css
静待雨落3 小时前
为什么给<a>标签设置了download属性, 浏览器没有下载而是打开新标签!!
html
夜雨深秋来3 小时前
BEM方法论:构建可维护的前端CSS架构
前端·css
小羊不会c++吗(黑客小羊)5 小时前
HTML教程——1,css
css·html
.生产的驴6 小时前
React 集成Redux数据状态管理 数据共享 全局共享
前端·javascript·react.js·前端框架·css3·html5·safari
程序猿追14 小时前
Vue组件化开发
前端·html
sky0Lan16 小时前
一个类似 pytest 的 html 报告
android·html·pytest
小九今天不码代码17 小时前
【前端高级特效】使用 CSS 实现毛玻璃模糊背景效果(含完整源码讲解)
css3·毛玻璃效果·css滤镜·backdrop-filter·blur模糊·前端特效·css视觉效果
菜鸟una18 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
代码改变世界1008618 小时前
像素策略游戏:资源战争
css·游戏·css3