h5让图片转圈的动效，让页面动起来

素颜马尾好姑娘i 2022-06-07 05:54 663阅读 0赞

h5让图片转圈的动效，让页面动起来  
1.先瞧瞧效果：  
![这里写图片描述][format_png]  
2.代码是这样的：

<img src="images/circle.png" alt="" id="circle"/>

@mixin ani-btnRotate{
        @keyframes btnRotate{
            from{transform: rotateZ(0);}
            to{transform: rotateZ(360deg);}
        }
    }
    @include ani-btnRotate;
    #circle{
        position: absolute;
        left: 50%;
        width: REM(338);
        height:  REM(338);
        margin-top: REM(200);
        margin-left: REM(-338/2);
        transform-origin: center center ;
        animation: btnRotate 1s 1s linear forwards;
        }

再来补充一个方法：

#circle{
        position: absolute;
        left: 50%;
        width: REM(338);
        height:  REM(338);
        margin-top: REM(200);
        margin-left: REM(-338/2);
        transform-origin: center center ;
       animation: btnRotate 10s infinite linear;
        }
    @-webkit-keyframes btnRotate {
      from {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
      }
    }
    @keyframes btnRotate {
      from {
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
      }
    }

用到的图片是这个：（就是白色转动的那个图片）  
![这里写图片描述][format_png 1]

[format_png]: /images/20220607/f208f92cd10f415b9ba26df49657b6aa.png
[format_png 1]: /images/20220607/e491ece1f6154db08b049467f16f83fb.png

发表评论取消回复

表情：

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

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

相关阅读

相关 CocosCreator让角色动起来

因为CocosCreator的Mac版本（最新v2.1.2）有bug，制作的Clips经常保存不了（如果Clips可以动但是运行的时候不动，多半这个情况），这种情况我的...

左手的ㄟ右手/ 2024年04月17日 22:59/ 0 赞/ 166 阅读

相关 QT实战项目：让图片动起来

QT实战项目：让图片动起来本项目使用QT编写，在窗口中展示一张图片，并添加一个按钮，点击按钮时图片会开始动起来。首先，需要在QT Creator中创建一个新的QT Wi

绝地灬酷狼/ 2024年03月23日 10:43/ 0 赞/ 148 阅读

相关科技，让二次元老婆动起来

想让你的二次元老婆动起来吗？ ![482117291f426b75423d02c9f7711fda.png][] 前不久，Meta（也就是Facebook）发布了一款有趣的

迈不过友情╰/ 2023年10月03日 18:08/ 0 赞/ 101 阅读

相关 Python+AI让静态图片动起来

哈喽，大家好。大家在刷短视频的时候有没有刷到这样的视频，视频里一张静态的人物图片能动起来，如：歪歪头、眨眨眼。类似于下面这种效果 ![在这里插入图片描述][5556b

￡神魔★判官ぃ/ 2023年09月28日 13:44/ 0 赞/ 90 阅读

相关让图片动起来

图片能够动起来，看起来像天方夜谭，gan确实可以做到了具体如下：（1）获取代码 git clone https://github.com/Aliaksandr

灰太狼/ 2022年12月04日 09:12/ 0 赞/ 385 阅读

相关 java让静止的东西动起来思想_Java的，怎样让画面动起来。

这个代码中有一个“@@@@”画面，请问怎样让它动起来。importjavax.swing.\;importjava.awt.\;publicclassceshi1extends

比眉伴天荒/ 2022年11月06日 12:54/ 0 赞/ 270 阅读

相关 iOS开发系列--让你的应用“动”起来

概览在iOS中随处都可以看到绚丽的动画效果，实现这些动画的过程并不复杂，今天将带大家一窥iOS动画全貌。在这里你可以看到iOS中如何使用图层精简非交互式绘图，如何通过核

古城微笑少年丶/ 2022年08月21日 08:59/ 0 赞/ 264 阅读

相关 H5动效的常见制作手法

[![博客头图][20151208114605892.jpg]][20151208114605892.jpg 1] [![前端技术][7.png]][7.png 1] 众所

我会带着你远行/ 2022年07月29日 11:49/ 0 赞/ 348 阅读

相关 Android逐帧动画——让图片动起来

Android逐帧动画——让图片动起来前言：逐帧动画要求开发者把动画过程的每张静态图片都收集起来，然后由android来控制依次显示这些静态图片，然后利用人眼视觉暂留的

喜欢ヅ旅行/ 2022年06月08日 12:25/ 0 赞/ 455 阅读

相关 h5让图片转圈的动效，让页面动起来

h5让图片转圈的动效，让页面动起来 1.先瞧瞧效果： ![这里写图片描述][format_png] 2.代码是这样的： <img src="images/

素颜马尾好姑娘i/ 2022年06月07日 05:54/ 0 赞/ 664 阅读