炫彩流光CSS特效按钮

炫彩流光CSS特效按钮

教程地址:原文地址(YouTube)

B站教程:原文转载(bilibili)

两个视频的内容相同,第二个为转载

效果图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iGfaTGaR-1579956835364)(演示.gif)]

代码区

以下代码为本人填写,转载请注明教程地址和本贴地址

html

<body>
    <a href="#">BUTTONa>
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; /*注意动画名称统一*/
}

JS


教程地址:原文地址(YouTube)

B站教程:原文转载(bilibili)

你可能感兴趣的:(html,css)