利用HTML+CSS+CSS3实现太极旋转动态图

忘是亡心i 2022-12-17 07:18 156阅读 0赞

## 太极旋转 ##

![在这里插入图片描述][20201022170941729.gif_pic_center]  
html部分只需要一个大盒子和两个小盒子

<div class="warp">
            <div class="left"></div>
            <div class="right"></div>
        </div>

css样式部分

<style> .warp{ 
                width: 200px;
                height: 100px;
                border-width:1px 1px 100px 1px ;
                border-style: solid;
                border-radius: 50%;
                margin: 100px auto;
                position: relative;
                /* 父级相对定位 */
                
            }
            .left{ 
                width: 20px;
                height: 20px;
                background-color: #fff;
                border: 40px solid #000;
                /* 边框属性 */
                border-radius: 50%;
                /* 圆角属性 */
                position: absolute;/*绝对定位 */
                left: 0;
                top: 50%;
            }
            .right{ 
                width: 20px;
                height: 20px;
                background-color: #000;
                border: 40px solid #fff;
                /* 边框属性 */
                border-radius: 50%;
                /* 圆角属性 */
                position: absolute;/*绝对定位 */
                right: 0;
                top: 50%;        
            }

css3定义动画属性

@keyframes candy { /*css3定义动画属性*/
                 0%{ 
                       transform: rotate(0deg); /* 旋转div元素 */
                       /* rotate 定义2d旋转 参数 规定旋转角度 */
                 }
                 100%{ 
                       transform: rotate(360deg); 
                 }
            }

调用css3定义的动画属性

animation: candy 3s linear infinite;
                /* 调用动画名称 动画时间 运行轨迹 动画状态 */
                /* linear 速度始终相同 */
                /* ease 低速加速减速 ease-in从低速开始 ease-out从低速结束*/

[20201022170941729.gif_pic_center]: /images/20221123/27fc40d10c2149cb93fa8ad062787246.png

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关【3D旋转相册效果实现】

最终效果图展示: ![在这里插入图片描述][20190929222316567.gif] HTML部分 1.首先在html中写上名为 perspective 的di

缺乏、安全感/ 2023年08月17日 16:55/ 0 赞/ 121 阅读

相关利用css3和js实现旋转木马图片小demo

先看效果图： ![1609428-20190812134314326-433135295.gif][] 上源码 html代码 <!DOCTYPE html>

落日映苍穹つ/ 2023年08月17日 15:23/ 0 赞/ 102 阅读

相关利用HTML+CSS+CSS3实现太极旋转动态图

太极旋转 ![在这里插入图片描述][20201022170941729.gif_pic_center] html部分只需要一个大盒子和两个小盒子 <div

忘是亡心i/ 2022年12月17日 07:18/ 0 赞/ 157 阅读

相关使用css3实现图片旋转

用CSS语法实现动态旋转 css3新增的语法中有个动画属性，今天没事，拿来玩玩动画做成是这样的 ![在这里插入图片描述][watermark_type_ZmFu

系统管理员/ 2022年11月19日 09:59/ 0 赞/ 253 阅读

相关用JavaScript实现旋转轮播图

旋转轮播图最近一直在学习JavaScript，然后看到旋转轮播图的案例，就尝试着用js做了一个简单的轮播图，因为无法显示动态效果，所以就放个截图： ![这里写图片描

墨蓝/ 2022年06月10日 11:42/ 0 赞/ 172 阅读

相关 css3 实现正方体3D旋转

源代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

亦凉/ 2022年06月04日 00:06/ 0 赞/ 286 阅读

相关旋转太极 css+cavans文章

http://geek.csdn.net/news/detail/252284 <!doctype html> <html lang="en"> <he

傷城~/ 2022年06月01日 06:16/ 0 赞/ 147 阅读

相关 css 实现3d旋转

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

柔光的暖阳◎/ 2022年05月28日 12:20/ 0 赞/ 285 阅读

相关利用CSS3实现图片3D旋转

以下是本次所作的效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4

古城微笑少年丶/ 2022年04月15日 01:08/ 0 赞/ 1027 阅读

相关原生JS实现旋转轮播图

效果图自动轮播效果图![\](https://img-blog.csdnimg.cn/20190316183332868.gif)][https_img-blog.cs

清疚/ 2022年03月07日 01:44/ 0 赞/ 321 阅读