css实现按钮边框流动特效

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
.my_btn {
  width: 100px;
  height: 50px;
  text-align: center;
  margin-top: 10px;
  line-height: 50px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  border-radius: 25px;
  z-index: 9;
}
@keyframes mymove {
  from {
    transform: rotateZ(0);
    transform-origin: left top;
  }
  to {
    transform: rotateZ(360deg);
    transform-origin: left top;
  }
}
 
.my_btn::after {
  content: "";
  border-radius: 25px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  background-color: #fff;
  position: absolute;
  top: 1px;
  left: 1px;
  z-index: -1;
}
 
.my_btn::before {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #f00;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -2;
  animation: mymove 3s infinite linear;
}

 利用元素的before  after伪元素  利用动画加定位层级实现,具体代码如上

posted @   岁月丷  阅读(523)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
点击右上角即可分享
微信分享提示