每日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. 源码如下

  1. 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>

  2. 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_霓虹灯按钮悬停效果的更多相关文章

  1. 前端每日实战：126# 视频演示如何用纯 CSS 创作小球变矩形背景的按钮悬停效果

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yxbEzJ 可交互视频 此视频是可 ...

  2. 每日CSS_滚动页面动画效果

    每日CSS_滚动页面动画效果 2021_1_13 源码链接 1. 代码解析 1.1 html 代码片段 <section> <h2>开 始 滑 动</h2> < ...

  3. MFC 使用位图按钮，并且设置按钮的鼠标悬停效果

    系统环境:Windows 10软件环境:Visual C++ 2013 SP1本次目的:使用位图按钮,并且设置按钮的鼠标悬停效果 在用MFC开发时,界面是比较不好开发的一块.VC中自带了CBitmap ...

  4. 每日CSS_实时时钟效果

    每日CSS_实时时钟效果 2020_12_22 源码链接 1. 代码解析 1.1 html 代码片段 <div class="clock"> <div class ...

  5. 每日CSS_发光文本效果

    每日CSS_发光文本效果 2020_12_22 源码 1. 代码解析 1.1 html 代码片段 <h1> <span>今</span> <span>天 ...

  6. css 按钮悬停效霓虹灯特效

    css 按钮悬停效霓虹灯特效 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

  7. Hover.css：一组超实用的 CSS3 悬停效果和动画

    Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...

  8. 每日CSS_仿苹果平滑开关按钮

    每日CSS_仿苹果平滑开关按钮 2020_12_24 源码 1. 代码解析 1.1 html 代码解析 <div class="checkbox"> <div c ...

  9. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

随机推荐

  1. 将多个PDF文件整合成一个文件

    pdfFactory不仅可以将单个文件创建为PDF文件进行打印,还可以将多个文件整合为一个PDF文件,同时,也可以随时删除其中的一些文件,创建新的PDF文件. 图1:pdfFactory工具界面 一. ...

  2. guitar pro 系列教程（十七）：Guitar Pro怎么导入音色库？

    前面的章节讲述了关于Guitar Pro相关功能的介绍以及使用,其中也有提到音色库,玩音乐的朋友都知道,音色库是一个乐器的必备,今天小编要跟大家讲的就是关于Guitar Pro音色库是如何导入进去的, ...

  3. ppt-1 操作界面与基本操作

    1.Ctrl+N快速建立新文档 2.新模板:文件--新建--可免费搜索.下载新模板 3.恢复未保存的演示文稿 文件--打开(首先看到的是近期使用的演示文稿,)--鼠标滚动至末尾,可看到"恢复 ...

  4. uniapp兄弟组件如何修改数据？一看就废！

    1. 如A组件里有个num = 10 并需要在生命周期函数created里通过uniapp提供的uni.$on方法来注册全局事件,并加一个形参.( uni.$on( '自定义事件名') , 形参 =& ...

  5. httpservlet类中两个service方法

    在浏览器访问html页面时,当数据提交给servlet时发生了什么,这是我们需要了解的. 1.我们需要了解一下servlet的继承体系. servlet接口 ------->GenericSer ...

  6. win10一行代码搭建本地html项目

    最近玩了下web项目,需要部署到本地查看效果. 一:准备 1.安装python或者安装node.js 2.html项目文件 二:python搭建 1.进入html文件的路径 2.通过python命令部 ...

  7. 【HAOI2015】树上操作

    (题面来自洛谷) 题目描述 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把某个节点 x 为根的子树 ...

  8. JavaSE 学习笔记08丨网络编程

    Chapter 14. 网络编程 14.1 计算机网络入门 当前节的知识点只是一个概述,更具体.详细的内容放在 计算机网络 中. 14.1.1 软件结构 C/S结构(Client/Server结构): ...

  9. Codeforces Round #665 (Div. 2) D. Maximum Distributed Tree 题解（贪心+易错）

    题目链接 题目大意 给你一课树,要你给每一条边分权值,每条边的权值大于0,他们的乘积等于k,而且要使得n-1条边1的数量尽可能少,定义 f(u,v)为u到v的边权和求 \(\max \sum_{i=1 ...

  10. 7-1 Hashing

    The task of this problem is simple: insert a sequence of distinct positive integers into a hash tabl ...