炫彩流光CSS特效按钮

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

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

效果图

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

代码区

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

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; /*注意动画名称统一*/
}

JS

教程地址：原文地址（YouTube）

B站教程：原文转载（bilibili）

炫彩流光CSS特效按钮相关推荐

炫彩流光按钮 CSS + HTML
炫彩流光按钮写在前面你若要喜爱你自己的价值,你就得给世界创造价值.--歌德效果图三个绝美的样例 HTML代码 <div class="box"><butt ...
炫彩流光文字 html+css
效果: 实现: 1. 定义标签,各自作用看后面解析: <main><h1 class="txt">live on.</h1><h1 cla ...
炫彩流光按钮 html+css
话不多,先上效果: 简介: 用基础css做一个有一点炫酷的流光按钮,不止按钮,只要是盒子就行. 具体步骤: 1.先定义一个盒子当做按钮,如我就用a标签: <body><a href= ...
请你使用html5编写一个关于黄柳瑜的网站，内容要包括炫彩动画和相关按钮，比如联系作者之类的...
好的,以下是一个简单的HTML5代码示例: <!DOCTYPE html> <html> <head><meta charset="UTF-8&qu ...
Canvas跟随鼠标炫彩小球
跟随鼠标炫彩小球 canvas没有让我失望,真的很有意思实现效果超级炫酷实现原理创建小球给小球添加随机颜色,随机半径鼠标移动通过实例化,新增小球通过调用给原型新增的方法,来实现小球的动画 ...
HTML5+CSS3小实例：炫彩的流光按钮
HTML+CSS3实现炫彩的流光按钮,是不是有点小好看,关键是代码还简单,遇到这样的按钮,我都不忍点击,就一直悬停在上面,静静欣赏它的美. 效果: <!DOCTYPE html> < ...
HTML5+CSS3小实例：炫彩爱心加载特效
HTML5+CSS3实现炫彩爱心加载特效,9根普通的线条,通过变换长度,即可打造一个动感炫彩的心形loading加载动画,变换过程伴随了模糊,更让这个loading动画更细腻.更富律动. 效果: 源码 ...
css特效2：流光边框
作为流光系列之一,流光边框和流光背景只有在::after上设置存在区别,所以本文中将不会有与流光背景相同的代码,如果您还没有看流光背景时怎么做的话,建议先看我前面的文章 css特效1:流光背景?我不允 ...
pyqt 取鼠标处文字_爱剪辑：炫彩的动态标题文字特效，这招让视频片头LOGO更酷炫...
爱剪辑学习委员会提醒您: 道路千万条,学习第一条. 教程不学会,制作两行泪. 今天教大家制作炫彩的动态标题文字特效,3步即可快速学会,让你立马不再流泪. 爱剪辑官网下载:http://www.aiji ...

炫彩流光CSS特效按钮

炫彩流光CSS特效按钮

效果图

代码区

html

CSS

JS

炫彩流光CSS特效按钮相关推荐

最新文章

热门文章