用Css+Div实现太极图自动旋转

补充：

源代码展示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>太极</title><style type="text/css">body{margin: 0;padding: 0;background-color: rgb(121, 127, 133);}.taichi{height: 400px;width: 400px;border-radius: 50%;margin: 80px auto;background-color:rgb(211, 65, 65);background: linear-gradient(to right,#000 50%,#fff 50%);animation: spin 0.8s linear infinite;/*动画设置*/}        div>p{height: 200px;width: 200px;border-radius: 50%;margin-left: 100px;border-color: magenta;}  .top{background-image: radial-gradient(#fff 25%,#000 25%);} .bottom{background-image: radial-gradient(#000 25%,#fff 25%);margin-top:-16px;} .taichi:hover{transform: rotate(360deg) ;transition:2s;}  /*动画方法*/@keyframes spin{ 0% {transform:rotate(0deg);}100% {transform:rotate(360deg);}}</style></head><body><div class="taichi"><p class="top"></p><p class="bottom"></p></div>  </body>
</html>

效果图：

无动画效果图：

太极图的半径可自定义，但相应的数值也会随之发生改变。

用Css+Div实现太极图自动旋转相关推荐

纯css 图片自动旋转动画
css能否实现图片自动旋转动画呢?答案当然是肯定的, 首先看下效果: HTML代码 <img src="https://gimg2.baidu.com/image_search/src ...
网页通过CSS写出生日倒计时（利用：日期倒计时、元素自动旋转、边框视觉按钮效果）[直接复制代码即可实现、含注释]
图片效果 ↓(代码为粉图,生日歌自动播放) 视频效果 ↓(音乐为自动播放) 网页通过CSS写出生日倒计时(利用:日期倒计时.元素自动旋转.边框视觉按钮效果) 代码 ↓(可直接复制使用,音乐引用网易云音 ...
CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size?...
原文:CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size? 其实方法非常简单,直接写代码: &l ...
YDOOK : CSS div 设置背景图片大小自动缩放
YDOOK : CSS div 设置背景图片大小自动缩放设置示例: 选择器{width:100%;height:100%;background-repeat:no-repeat:background ...
CSS样式图片放在DIV里面，自动填充充满，且不变形
CSS样式图片放在DIV里面,自动填充充满且不变形一.图片用img标签存放 HTML如下: <div><img src="..." alt="&quo ...
html 背景图片自动旋转,CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
需求背景使用 vue 做的项目,业务需求有一个拼图效果,默认是深色的背景图,上面分五个区域,每次会亮一个区域,整张图都亮,拼图完成.先来看一下最终的效果图. 应用到的知识点: background- ...
css/div/兼容性及常见bug
css+div基础 css 清除浮动的几种方法 css省略号 css文字排版方向 html 盒子水平垂直居中 px.em.em的区别 src和href的区别 link和@import的区别定位的区别 ...
手把手教你做出数据可视化项目（六）动态3D柱状图及其自动旋转
数据可视化前言:https://blog.csdn.net/diviner_s/article/details/115933789 项目最终效果图: 此篇博客为自己学习pink老师的课后完成的项目的总 ...
【MAPBOX基础功能】21、mapbox绘制自动旋转的图标
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...

用Css+Div实现太极图自动旋转

用Css+Div实现太极图自动旋转

用Css+Div实现太极图自动旋转相关推荐

最新文章

热门文章