MENU

炫彩流光CSS特效按钮

转载自CSDN

效果

鼠标悬浮于按钮上有特效,夜间模式下效果更佳!

代码:

HTML

<body>
    <a href="#">BUTTON</a>
</body>

CSS

body{
  margin: 0; /*外边距*/
  padding: 0; /*内边距*/
  background-color: #000; /*背景颜色*/
}
a{
  position: absolute; /*绝对对位*/
  top: 50%; /*距上部*/
  left: 50%; 
  transform: translate(-50%,-50%); /*移动,根据X,Y轴*/
  width: 400px; /*宽*/
  height: 120px; /*高*/
  text-align: center; /*字体水平居中*/
  font-size: 45px; /*字体大小*/
  line-height: 120px; /*行高*/
  color: #fff;
  text-transform: uppercase; /*字体大写*/
  text-decoration: none; /*字体增加装饰:去除下划线*/
  font-family: sans-serif; /*非衬线体*/
  box-sizing: border-box; /*盒模型大小规则*/
  background: linear-gradient(
    90deg,#03a9f4, #f441a5, #ffeb3b, 
  #03a9f4, #f441a5, #ffeb3b, #03a9f4); /*渐变背景*/
  border-radius: 60px; /*边框圆角*/
  background-size: 400%; /*背景大小*/
  z-index: 1; /*层叠定位*/
}
a:hover{
  animation: animate 8s linear infinite alternate; /*动画: 名称 时间 线性 循环 播放完回退播放*/
}
@keyframes animate{
  0%{
    background-position: 0%; /*修改背景定位,实现渐变色炫光*/
  }
  50%{
    background-position: 100%;
  }
  100%{
    background-position: 0%;
  }
}
a::before{ /*之前添加*/
  content: ''; /*内容*/
  position: absolute; /*绝对定位*/
  top:-5px; /*当设置对立的2个定位属性时,元素的大小将由对立的大小决定*/
  left: -5px;
  right: -5px;
  bottom: -5px; /*当设置对立的2个定位属性时,元素的大小将由对立的大小决定*/
  z-index: -1; 
  background: linear-gradient(
    90deg,#03a9f4, #f441a5, #ffeb3b, #03a9f4, 
  #f441a5, #ffeb3b, #03a9f4);
  border-radius: 40px;
  background-size: 400%;
  filter: blur(20px); /*过渡:模糊*/
  opacity: 0; /*透明度*/
  transition: 1s; /*过渡时间*/
}
a:hover::before{
  filter: blur(20px);
  opacity: 1;
  animation: animate 8s linear infinite; /*注意动画名称统一*/
}

版权属于:LeeYD · Blog
本文标题:炫彩流光CSS特效按钮
本文链接:https://www.leeyiding.com/archives/41/
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 4.0 许可协议
若转载本文,请标明出处并告知本人

最后编辑于: 2020 年 03 月 25 日
返回文章列表 文章二维码 打赏
本页链接的二维码
打赏二维码
添加新评论

打卡

已有 1 条评论
  1. Uncle_drew Uncle_drew     Android /   Google Chrome

    膜了