css动画--使用图标进行顺时针与逆时针转圈

今天药忘吃喽~ 2023-07-01 11:53 14阅读 0赞

css动画–使用图标进行顺时针与逆时针转圈  
说明：上面顺时针，下面图逆时针  
![在这里插入图片描述][2020012117191111.png]  
代码如下：

<template>
    
        <div style="width:1300px;height: 600px;border: 1px solid red;margin:0 auto">
            <div class="circel">
            </div>
            <div class="unCircel">
            </div>
        </div>
    
    </template>
    
    <script>
        export default {
            name: "CirCelAnimation"
        }
    </script>
    
    <style scoped lang="stylus">
        .circel{
            width 100px;
            height 100px;
            background url(../../assets/images/circel.png) no-repeat
            background-size cover
            animation goCircel 2s linear infinite
           /* position absolute*/
    
        }
        .unCircel{
            width 100px;
            height 100px;
            background url(../../assets/images/circel.png) no-repeat
            background-size cover
            animation unCircel 2s linear infinite
            /*position absolute*/
        }
    
        @keyframes goCircel{
            0%{
                transform rotate(0deg)
            }
            100%{
                transform rotate(360deg)
            }
        }
    
        @keyframes unCircel{
            0%{
                transform rotate(360deg)
            }
            100%{
                transform rotate(0deg)
            }
        }
    
    </style>

[2020012117191111.png]: https://img-blog.csdnimg.cn/2020012117191111.png

发表评论取消回复

表情：

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

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

相关阅读

相关 css动画--使用图标进行顺时针与逆时针转圈

css动画–使用图标进行顺时针与逆时针转圈说明：上面顺时针，下面图逆时针 ![在这里插入图片描述][2020012117191111.png] 代码如下：

今天药忘吃喽~/ 2023年07月01日 11:53/ 0 赞/ 15 阅读

相关 CSS - 元素旋转动画（360度转圈）

效果图 ![在这里插入图片描述][2020112611231257.gif_pic_cener] 代码 @keyframes rotate {

野性酷女/ 2022年12月24日 01:49/ 0 赞/ 328 阅读

相关顺时针打印

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

喜欢ヅ旅行/ 2022年11月30日 12:26/ 0 赞/ 200 阅读

相关 CSS3 元素转圈动画（元素旋转动画）

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

谁践踏了优雅/ 2022年11月10日 01:25/ 0 赞/ 251 阅读

相关多边形坐标点记录是顺时针还是逆时针的判断

参考链接：[http://hi.baidu.com/op\_kaixinguo/item/e5c9ed3c9a8adb079dc65ee5][http_hi.baidu.com

迈不过友情╰/ 2022年10月02日 15:58/ 0 赞/ 198 阅读

相关 python 顺时针排序

from functools import reduce import operator import math coords = [(0, 1

忘是亡心i/ 2022年08月28日 12:48/ 0 赞/ 221 阅读

相关螺旋队列顺时针方向和逆时针方向的实现

这个[博主][Link 1]找规律的部分写得很好，原样放在下面。最后给出了顺时针和逆时针方向的螺旋队列的实现，可以看出它们的差别如此之小。和螺旋队列类似，也是找规律的[zi

素颜马尾好姑娘i/ 2022年08月06日 13:06/ 0 赞/ 189 阅读

相关顺时针旋转矩阵

链接：[https://www.nowcoder.com/questionTerminal/2e95333fbdd4451395066957e24909cc][https_ww

一时失言乱红尘/ 2022年06月08日 02:29/ 0 赞/ 260 阅读

相关顺时针打印矩阵

一，问题描述给定一个N x N 的矩阵（方阵），按照从外向里的以顺时针方向依次打印矩阵中的每个元素。比如：一个 3X3的矩阵如下：打印顺序为：1 2 3 6 9 8 7

今天药忘吃喽~/ 2022年03月30日 06:13/ 0 赞/ 290 阅读

相关【转】Google Chrome中顺时针/逆时针滚动圆的含义

当浏览器处于以下状态时，看起来好像圆圈是逆时针滚动的：解析主机名连接服务器等待响应（从服务器发送第一个字节之前？）当浏览器处于以下状态时，圆圈似

ゞ浴缸里的玫瑰/ 2021年12月24日 13:59/ 0 赞/ 251 阅读