分类

链接

2019 年 5 月
一 二 三 四 五 六 日
 12345
6789101112
13141516171819
20212223242526
2728293031  

近期文章

热门标签

新人福利，免费薅羊毛

现在位置:    首页 ＞ 前端 ＞ 正文
共享办公室出租
分享一个CSS3边框旋转特效
 2019-05-16 11:08 前端 暂无评论 阅读(300)

效果如下：

  1. <style>.bb, .bb::before, .bb::after {
  2.           position: absolute;
  3.           top: 0;
  4.           bottom: 0;
  5.           left: 0;
  6.           right: 0;
  7.           border-radius:100%;
  8.         }
  9.          
  10.         .bb {
  11.           width: 100px;
  12.           height: 100px;
  13.           margin: auto;
  14.           background: url("img/Button-White-Large.png") no-repeat 50%/70% rgba(0, 0, 0, 0.1);
  15.           color: #69ca62;
  16.           box-shadow: inset 0 0 0 1px rgba(105, 202, 98, 0.5);
  17.         }
  18.         .bb::after,.bb::before {  
  19.           content: '';
  20.           z-index: -1; 
  21.           margin:0px;
  22.           box-shadow: inset 0 0 0 2px;
  23.           animation: rotate 6s linear infinite;
  24.            clip: rect(0px, 50.0px, 2px, 0px);
  25.         }
  26.         .bb::before {
  27.           animation-delay: -3s;
  28.         }
  29.         
  30.       @keyframes rotate{
  31.             from {
  32.                     transform: rotate(0deg);
  33.                 }
  34.                 to {
  35.                     transform: rotate(360deg);
  36.                 }
  37.       }
  38.           
  39.         </style>
  40.         
  41.         <div class="bb"></div>
  42.         

============ 欢迎各位老板打赏~ ===========

关键字:
【上篇】
【下篇】

与本文相关的文章

该日志由 Bruce 于2019年05月16日发表在前端分类下

本文版权归Bruce's Blog所有，转载引用请完整注明以下信息：
本文作者：Bruce
本文地址：分享一个CSS3边框旋转特效 | Bruce's Blog

发表评论

留言无头像?