每日CSS_霓虹灯按钮悬停效果
每日CSS_霓虹灯按钮悬停效果
2020_12_20
1. 代码解析
1.1 html 代码片段解析
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
霓虹灯 按钮
</a>
这四个 span 标签用来模拟上下左右四根线
1.2 CSS 代码片段解析
body 代码
body{
margin: 0;
padding: 0;
/* flex 布局 */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #031321;
font-family: 华文琥珀;
}
应用到了 flex 布局, 将内容显示在屏幕中央
a 标签
a{
/* 为绝对定位做参考点 */
position: relative;
display: inline-block;
/* 将文字与线分割开 */
padding: 15px 30px;
color: #2196f3;
/* 文字间隔 */
letter-spacing: 4px;
text-decoration: none;
font-size: 24px;
/* 隐藏越界的线 */
overflow: hidden;
/* 附在 a 上的动画, 触发时和回退时均有效 */
transition: 0.2s;
}
需要注意的是 transition, 放在 a 标签而不是 a:hover 标签里的原因是, 放在 a 标签, 移入移出均有效果, 而放在 a:hover 中, 移入有效果, 移出没效果
a:hover
a:hover{
color: #255784;
background: #2196f3;
/* 多个阴影模拟霓虹灯 */
box-shadow:
0 0 10px #2196f3,0 0 40px #2196f3,0 0 10px #2196f3,0 0 80px #2196f3;
/* 有延迟 */
transition-delay: 1s;
}
这里有三个动画, color, backgroud 和 box-shadow, background 由透明变为 #2196f3, 效果对比如下
最重要的移动线条
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;
}
首先, 将所有的 span 设为绝对定位, a 为相对定位. 将上方的线从左边移动到右边, 在 a 选择器中设置了 overflow: hidden, 因此越界的线被隐藏了. 将 left 固定为 0 的效果如下.
当left从 -100% 到 100% 是就有了闪过的效果,
再介绍一个右边的线条, 其余的一样
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 .25s;
}
注意, background, 是一根竖线, 宽 2px, 高 100%, 若 top 一直为 0 时效果如下
2. 源码如下
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="2020_12_20.css">
</head>
<body>
<a href="#">
<span></span>
<span></span>
<span></span>
<span></span>
霓虹灯 按钮
</a>
</body>
</html>
css
body{
margin: 0;
padding: 0;
/* flex 布局 */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #031321;
font-family: 华文琥珀;
}
a{
/* 为绝对定位做参考点 */
position: relative;
display: inline-block;
/* 将文字与线分割开 */
padding: 15px 30px;
color: #2196f3;
/* 文字间隔 */
letter-spacing: 4px;
text-decoration: none;
font-size: 24px;
overflow: hidden;
/* 附在 a 上的动画, 触发时和回退时均有效 */
transition: 0.2s;
}
a:hover{
color: #255784;
background: #2196f3;
/* 多个阴影模拟霓虹灯 */
box-shadow:
0 0 10px #2196f3,0 0 40px #2196f3,0 0 10px #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;
left: 100%;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #2196f3);
}
a:hover span:nth-child(3){
left: -100%;
transition: 1s .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 .25s;
}
a span:nth-child(4){
left: 0;
top: 100%;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #2196f3);
}
a:hover span:nth-child(4){
top: -100%;
transition: 1s .75s;
}
每日CSS_霓虹灯按钮悬停效果的更多相关文章
- 前端每日实战:126# 视频演示如何用纯 CSS 创作小球变矩形背景的按钮悬停效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yxbEzJ 可交互视频 此视频是可 ...
- 每日CSS_滚动页面动画效果
每日CSS_滚动页面动画效果 2021_1_13 源码链接 1. 代码解析 1.1 html 代码片段 <section> <h2>开 始 滑 动</h2> < ...
- MFC 使用位图按钮,并且设置按钮的鼠标悬停效果
系统环境:Windows 10软件环境:Visual C++ 2013 SP1本次目的:使用位图按钮,并且设置按钮的鼠标悬停效果 在用MFC开发时,界面是比较不好开发的一块.VC中自带了CBitmap ...
- 每日CSS_实时时钟效果
每日CSS_实时时钟效果 2020_12_22 源码链接 1. 代码解析 1.1 html 代码片段 <div class="clock"> <div class ...
- 每日CSS_发光文本效果
每日CSS_发光文本效果 2020_12_22 源码 1. 代码解析 1.1 html 代码片段 <h1> <span>今</span> <span>天 ...
- css 按钮悬停效霓虹灯特效
css 按钮悬停效霓虹灯特效 <!DOCTYPE html> <html lang="en"> <head> <meta charset=
- Hover.css:一组超实用的 CSS3 悬停效果和动画
Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...
- 每日CSS_仿苹果平滑开关按钮
每日CSS_仿苹果平滑开关按钮 2020_12_24 源码 1. 代码解析 1.1 html 代码解析 <div class="checkbox"> <div c ...
- 每日CSS_纯CSS制作进度条
每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...
随机推荐
- Vegas让人物回眸更有韵味的方法分享
"回眸一笑百媚生,六宫粉黛无颜色",是白居易在<长恨歌>中描述杨贵妃美貌的名句,这一句运用夸张的手法,反映了杨贵妃回眸时的娇媚横生,百般娇媚. 接下来,小编就教你用视频 ...
- Redis设计与实现一之简单的动态字符串
简单的动态字符串 Redis没有直接使用C语言中的字符串,而是自己构建了SDS这样的一种简单动态字符串,并且将他作为Redis中字符串的默认的表示. 但是并未完全抛弃C语言字符串,只不过是在C语言字符 ...
- Linux服务器学习----tomcat 服务配置实验报告(一)
一.实验目的 1. 掌握 tomcat 服务的搭建 二.实验内容 1. 搭建一台缓存 tomcat 服务器 三.实验环境1. tomcat 服务器 centos7 对应主机 ip 为 10.10.64 ...
- sqli-labs-master less05 前 知识点学习
1. left()函数: left(a,b)从左侧截取a的前b位,正确则返回1,错误则返回0 例: select left(database(),1)='s' 结果返回1 先查询数据库 datab ...
- python应用(6):函数
在流程很简单的时候,或者流程不简单但我们不需要考虑开发维护成本的时候,平面地组织你的代码就够了,不用费脑子,不需要考虑层次或重用的东西.当事情变得越来越复杂时,当同行对代码质量要求越来越高时,有一些重 ...
- LeetCode 041 First Missing Positive
题目要求:First Missing Positive Given an unsorted integer array, find the first missing positive integer ...
- Docsify+腾讯云对象存储 COS,一键搭建云上静态博客
最近一直在想如何利用 COS 简化静态博客的搭建过程.搜了很多的静态博客搭建过程,发现大部分的静态博客都要通过编译才能生成静态页面.功夫不负有心人,终于让我找到了一个超简洁博客的搭建方法. 效果预览 ...
- 【2020.11.30提高组模拟】删边(delete)
删边(delete) 题目 题目描述 给你一棵n个结点的树,每个结点有一个权值,删除一条边的费用为该边连接的两个子树中结点权值最大值之和.现要删除树中的所有边,删除边的顺序可以任意设定,请计算出所有方 ...
- 区块链学习7:超级账本项目Hyperledger与Fabric以及二者的关系
☞ ░ 前往老猿Python博文目录 ░ 一.超级账本(hyperledger) 超级账本(hyperledger)是Linux基金会于2015年发起的推进区块链数字技术和交易验证的开源项目,成员包括 ...
- 第15.8节 PyQt入门学习:Designer的界面功能介绍
进入Qt Designer以后,打开或新建一个ui文件,Qt Designer窗口展示的页面如下图所示: 老猿将界面各部分使用红色数字进行标记,按照数字顺序各区域对应功能分别为: 1.界面元素控件区域 ...