CSS3效果

白色玫瑰 程序猿

时间: 2023-07-15 阅读: 1 字数:1915

html css3
{}
环绕旋转html\n
\ncss .bb, .bb::before, .bb::after {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;

环绕旋转

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

本文章网址:https://www.sjxi.cn/detil/f402cd1d7dac424dafd1a1a5288dccfc

最新评论

当前未登陆哦
登陆后才可评论哦

湘ICP备2021009447号

×

(穷逼博主)在线接单

QQ: 1164453243

邮箱: abcdsjx@126.com

前端项目代做
前后端分离
Python 爬虫脚本
Java 后台开发
各种脚本编写
服务器搭建
个人博客搭建
Web 应用开发
Chrome 插件编写
Bug 修复