CSS3效果_it博客站_花生个人博客

环绕旋转

html

<body>
  <div class='bb'></div>
</body>

css

 .bb, .bb::before, .bb::after {
         position: absolute;
         top: 0;
         bottom: 0;
         left: 0;
         right: 0;
      }

       .bb {
         width: 200px;
         height: 200px;
         margin: auto;
         background: #009a61;
         color: #009a96;

      }

       .bb::before, .bb::after {
         content: '';
         z-index: -1;
         margin: -5%;
         box-shadow: inset 0 0 0 2px;
         animation: clipMe 8s linear infinite;
         transition:clip 0.3s;
      }

       .bb::before {
         animation-delay: -4s;
      }

      @-webkit-keyframes clipMe {
         0%, 100% {
            clip: rect(0px, 220px, 2px, 0px);
         }
         25% {
            clip: rect(0px, 2px, 220px, 0px);
         } 
         50% {
            clip: rect(218px, 220px, 220px, 0px);
         }
         75% {
            clip: rect(0px, 220px, 220px, 218px);
         }
      }

效果

这里写图片描述

原文地址：https://blog.csdn.net/csr0312/article/details/50598552?ops_request_misc=&request_id=82e9f7c9543d4e73bf6aefb5fae95707&biz_id=&utm_medium=distribute.pc_search_result.none-task-blog-2~all~koosearch~default-8-50598552-null-null.142^v88^insert_down28v1,239^v2^insert_chatgpt&utm_term=css3%E7%89%B9%E6%95%88

HuaShen

CSS3效果

目录

环绕旋转

html

css

效果

打赏作者

推荐阅读

【分享】必应浏览器25.5 🔥纯净版想的到想不到的都能做

QQXML 卡片菜单代码分享

【iapp】手电筒源码

【分享】🔥测量大师🔥测量身高🔥内置众多功能

当前未登陆哦

关于此站

学习网站

优秀排版个人博客

(穷逼博主)在线接单