CSS动画转圈圈

最新推荐文章于 2024-06-20 04:45:00 发布

CongJiYong

最新推荐文章于 2024-06-20 04:45:00 发布

阅读量1.8k

点赞数

分类专栏： CSS 文章标签： css 动画 css3

本文链接：https://blog.csdn.net/CongJiYong/article/details/125165347

版权

CSS动画旋转关键帧边框延迟

关键词由CSDN通过智能技术生成

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=`, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item:nth-child(1) {
            animation: identifier 6s infinite linear;
            transform-origin: 150px 150px;
    
        }

        .item:nth-child(2) {
            animation: identifier 6s infinite -1s linear;
            transform-origin: 150px 150px;
        

        }

        .item:nth-child(3) {
            animation: identifier 6s infinite -2s linear;
            transform-origin: 150px 150px;
       

        }
        .item:nth-child(4) {
            animation: identifier 6s infinite -3s linear;
            transform-origin: 150px 150px;
       

        }
        .item:nth-child(5) {
            animation: identifier 6s infinite -4s linear;
            transform-origin: 150px 150px;
           
        }
        .item:nth-child(6) {
            animation: identifier 6s infinite -5s linear;
            transform-origin: 150px 150px;
        }
        @keyframes identifier {
            0% {
                transform: rotate(0deg) scale(1);
                border: 10px solid #abc;
            }
            50% {
                transform: rotate(180deg) scale(1);
                border:10px solid #00ffff;
            }
            100% {
                transform: rotate(360deg) scale(1);
                border: 10px solid #abc;

            }
        }
            
        
        .item {
            width: 100px;
            height: 110px;
            background: #f40;
            border-radius: 100%;
            position: absolute;
            top: 100px;
            left: 100px;
        }
    </style>
</head>

<body>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  
</body>

</html>