效果图:
代码:
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title>太极图</title><style>/* 通配符 */*{margin: 0;padding: 0;}/* 类选择器 */.box{/* 相对定位 不会脱离文档流*/position: relative;width: 140px;height: 70px;/* 上下 左右 居中 */margin: 100px auto;/* 边框 实线 */border-style: solid;/* 上右下左 */border-width: 2px 2px 72px 2px;/* 圆角属性 */border-radius: 50%;/* 调用下面rot *//* 动画绑定 时间 无限循环 匀速运动*/animation: rot 2s infinite linear;}/* 伪元素 css新增 before:元素头部添加内容 插入内容 */.box::before{content: \"\";/* 绝对定位 脱离文档流 父元素 */position: absolute;top: 50%;left: 0;width: 30px;height: 30px;background-color: #fff;border-radius: 50%;border: 20px solid #000;}/* 尾部添加元素 */.box::after{content: \"\";/* 绝对定位 脱离文档流 父元素 */position: absolute;width: 30px;height: 30px;top: 50%;left:50%;background-color: #000;border: 20px solid #fff;border-radius: 50%;}/* 旋转 *//* 创建动画 名称 0%开始 100%结束*/@keyframes rot{0%{transform: rotate(0deg);/* 变形 旋转 360度*/}100%{transform: rotate(360deg);/* 变形 旋转 360度*/}}</style></head><body><div class=\"box\"></div></body></html>
爱站程序员基地
