前端特效-霓虹灯按钮

半年前看到了一个炫酷的前端特效，忘了在哪看的了但是觉得很好看，今天发在这给大家康康。QWQ

这个是我做好的预览图

前端小特效-霓虹灯按钮预览

按钮的html很简单。四个span用来做环绕的特效，href用来链接下面用来显示。套一个a标签就完成了。

 <a href="#"><span></span><span></span><span></span><span></span>扁呱RICHAR</a>

css对按钮来说才是重头戏。

body部分就是一些基础设置。将margin和padding归零。顺便设置一下背景颜色。将各元素居中。

body{margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;min-height: 100vh;background:#031321;font-family: consolas;
}

a标签的整体样式.主要是为下面的盒子阴影变化做铺垫。设置一下按钮内字体的样式。

a{position: relative;display: inline-block;padding: 15px 30px;color: #2196f3；text-transform:uppercase;letter-spacing: 4px;text-decoration: none;font-size: 24px;overflow: hidden;transition: 2s;}

a标签扩散阴影效果。其实就是三个盒子阴影在transition属性下的变换.

a:hover{color: #255784;background:#2196f3;box-shadow: 0 0 10px #2196f3,0 0 40px #2196f3,0 0 80px #2196f3;transition-delay:1s;
}

下面就是我们的彩条环绕特效。说白了就是span来的四个渐变色彩的长方形左右/上下移动形成的视觉感。只要用动画控制这些彩条的移动，延迟，就可以了。让每个彩条呆在-100%的位置使其隐藏，当鼠标移在按钮上时就用hover属性设置彩条移动到100%就可以了。四个彩条操作相同。

a span:nth-child(1){top: 0;left: -100%;width: 100%;height: 2px;background:linear-gradient(90deg,transparent,#2196f3);
}a:hover span:nth-child(1){left: 100%;transition: 1s;
}a span:nth-child(3){bottom: 0;right: -100%;width: 100%;height: 2px;background:linear-gradient(270deg,transparent,#2196f3);
}a:hover span:nth-child(3){right: 100%;transition: 1s;transition-delay: 0.5s;
}a span:nth-child(2){right: 0;top: -100%;width: 2px;height: 100%;background:linear-gradient(180deg,transparent,#2196f3);
}a:hover span:nth-child(2){top: 100%;transition: 1s;transition-delay: 0.25s;
}a span:nth-child(4){left: 0;bottom: -100%;width: 2px;height: 100%;background:linear-gradient(360deg,transparent,#2196f3);
}a:hover span:nth-child(4){bottom: 100%;transition: 1s;transition-delay: 0.75s;
}

下面是css所有代码综合：

body{margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;min-height: 100vh;background:#031321;font-family: consolas;
}a{position: relative;display: inline-block;padding: 15px 30px;color: #2196f3；text-transform:uppercase;letter-spacing: 4px;text-decoration: none;font-size: 24px;overflow: hidden;transition: 2s;}a:hover{color: #255784;background:#2196f3;box-shadow: 0 0 10px #2196f3,0 0 40px #2196f3,0 0 80px #2196f3;transition-delay:1s;
}a span{position: absolute;display: block;
}a span:nth-child(1){top: 0;left: -100%;width: 100%;height: 2px;background:linear-gradient(90deg,transparent,#2196f3);
}a:hover span:nth-child(1){left: 100%;transition: 1s;
}a span:nth-child(3){bottom: 0;right: -100%;width: 100%;height: 2px;background:linear-gradient(270deg,transparent,#2196f3);
}a:hover span:nth-child(3){right: 100%;transition: 1s;transition-delay: 0.5s;
}a span:nth-child(2){right: 0;top: -100%;width: 2px;height: 100%;background:linear-gradient(180deg,transparent,#2196f3);
}a:hover span:nth-child(2){top: 100%;transition: 1s;transition-delay: 0.25s;
}a span:nth-child(4){left: 0;bottom: -100%;width: 2px;height: 100%;background:linear-gradient(360deg,transparent,#2196f3);
}a:hover span:nth-child(4){bottom: 100%;transition: 1s;transition-delay: 0.75s;
}

简短但是炫酷的按钮特效就这样完成了.QWQ

前端特效-霓虹灯按钮相关推荐

【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> ...
【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效惊艳| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE html> & ...
css3.0动画,CSS3.0实现霓虹灯按钮动画特效的示例代码
今天给大家分享一个用CSS 3.0实现的霓虹灯按钮动画特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏. CSS 3.0实现霓虹灯按钮动画特效 * { font-family: '微软雅黑', ...
H5+css+js前端特效源代码：发光动画按钮：上传按钮
前端特效:发光动画按钮:上传按钮 H5+CSS+JS 骨架+皮肤+功能效果展示源代码: H5部分: <!DOCTYPE html> <html lang="en&quo ...
html烟花特效案例,HTML5前端特效库 css3 按钮粒子烟花特效源码
HTML5前端特效库 css3 按钮粒子烟花特效源码效果图各位长友大家上午好! 今天给大家带来的是 css3 按钮粒子烟花特效源码! 大家可以按照自己的意愿进行修改! 有想要文件版源码的可以在我 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个果冻导航标签栏图标按钮效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: < ...
【web前端特效源码】Html5+css3+JavaScript实现计算器2功能+新拟态新拟物风格(Neumorphism)网页图标按钮效果~手把手教学~适合初学者~超简单~
b站视频演示效果: [web前端特效源码]Html5+css3+JavaScript实现计算器2功能+新拟态新拟物风格(Neumorphism)网页图标按钮效果!手把手教学! 效果图: 完整代码: & ...
三郎前端特效学习源代码：图片主页轮播组件
三郎前端特效学习源代码:图片主页轮播组件简单介绍效果图源代码 html部分 js部分 css部分简单介绍各大网站都比较常用的主页轮播组件可以自己改改就能用效果图源代码 html部分 & ...
【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）
卡塔尔世界杯元素python海龟绘图(附源代码) 世界杯主题前端特效5个(附源码)程序人生本文目录: 一.python turtle海龟绘图卡塔尔世界杯元素 (1).绘制效果图 (2).代码演示方法 ...
CSS实现霓虹灯按钮，CSS实现炫酷的霓虹灯按钮动画
作者:AlbertYang,软件设计师,Java工程师,前端工程师,爱阅读,爱思考,爱编程,爱自由,信奉终生学习,每天学习一点点,就是领先的开始. 微信公众号:AlbertYang 今天教大家使用CS ...

前端特效-霓虹灯按钮

前端特效-霓虹灯按钮相关推荐

最新文章

热门文章