一个div实现太极图案+动画（简单易懂）

代码在下面，需要的自取

讲解一下思路，这是一个只有高度的div，然后我们可以给这个div左右边框设的大一点，通过圆角让他变成两个半圆，进而组成一个完整的黑白圆

通过伪元素::before和::after实现两个小圆，小圆的实现是，设置等距宽高并修饰成圆，给予一个粗一点的边框就好了

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>太极旋转</title><style>* {margin: 0;padding: 0;}:root {background-color: rgba(141, 129, 113, 0.747);}.taiji:hover {box-shadow: 5px 0px 20px #457b9d,-5px 0px 20px #06d6a0,0px 5px 20px #480ca8,0px -5px 20px #e63946;}/* 动画 */@keyframes myAnimal {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}/* 设置两个大的半圆 */.taiji {/* 让图形不紧贴边框 */margin: 100px;height: 300px;width: 0;border-right: 150px solid #fff;border-left: 150px solid #000;border-radius: 50%;/* 设置动画 */animation: myAnimal 5s linear infinite;transition: all 0.3s;}.taiji::before {/* 因为要设置宽高，所以display给予block属性 */display: block;/* 伪元素必须要写content，即使他为空 */content: "";background-color: white;width: 50px;height: 50px;border-radius: 50%;border: 50px solid #000;margin-left: -72.5px;}.taiji::after {/* 因为要设置宽高，所以display给予block属性 */display: block;/* 伪元素必须要写content，即使他为空 */content: "";background-color: #000;width: 50px;height: 50px;border-radius: 50%;border: 50px solid #fff;margin-left: -72.5px;}</style></head><body><div class="taiji"></div>
</body></html>

一个div实现太极图案+动画（简单易懂）相关推荐

CSS3使用一个盒子实现太极图案
使用一个盒子实现太极图案代码如下: <body><div></div> </body> * {margin: 0;padding: 0; } body ...
html中导航条置顶的代码,一个DIV+CSS代码布局的简单导航条
一个蓝色主题的导航条结构案例,本CSS小实例,采取DIV CSS实现.同时不必图片做靠山,直接运用布景致完成,鼠标经由过程悬停对应栏目称说是对应背景蓝色变深. 导航条一小块成就截图通常导航条接纳ul ...
一个完美的导航条html,一个DIV CSS代码布局的简单导航条
简单的DIV CSS代码布局实现导航条一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现.同时不用图片做背景,直接使用背景色实现,鼠标经过悬停对应栏目名称是对应背景蓝色变深. 导航 ...
一个div 实现太极八卦图
效果图 css <style>.aaa{width: 100px;height: 200px;background-color: #ffffff;position: absolute;to ...
一个flash鼠标效果，代码简单易懂
var posYoubiao:Array = new Array(); posYoubiao[0] = 5; for (i=1; i [img]/Files/BeyondPic/2006-12/4 ...
CSS3_边框 border 详解_一个 div 的阴阳图
(面试题) 怎么样通过 CSS 画一个三角形: 1. 元素的 width 和 height 设置为 0 2. 边框足够大 3. 需要的三角形的部分, border-top-color 设置为 ...
【简单实现html页面指定某一个div局部刷新】
[简单实现html页面指定某一个div局部刷新] 运用情景代码实现运用情景根据页面功能需要实现具体的某一个div的数据实现实时刷新,显示实时数据流代码实现刷新脚本: # 代码直接放在.htm ...
CSS3 实现太极图案
CSS3实现太极图案分析图片组成(如下图所示): 先给出html代码: <div class="box"><div class="content&qu ...
一个div 上下两行_纯CSS实现单一div的正多边形变换
纯粹利用CSS,让"单一个"div,从正三角形变换为正八边形(单一div最多只能做到正八边形),最后再搭配动画的效果,变成正多边形的变换动画,也由于正多边形需要用到不少的三角函数计 ...
一、css清除浮动方法学习笔记总结（超详细，简单易懂）
** css清除浮动方法学习笔记总结(超详细,简单易懂) ** 问题: 上图中,由于container(父级元素)未设置高度,其内部子元素设置了float浮动,导致与container同级(也就是co ...

一个div实现太极图案+动画（简单易懂）

一个div实现太极图案+动画（简单易懂）相关推荐

最新文章

热门文章