每日CSS_霓虹灯按钮悬停效果

2020_12_20

1. 代码解析

1.1 html 代码片段解析

  1. <a href="#">
  2. <span></span>
  3. <span></span>
  4. <span></span>
  5. <span></span>
  6. 霓虹灯 按钮
  7. </a>

这四个 span 标签用来模拟上下左右四根线

1.2 CSS 代码片段解析

  • body 代码

    1. body{
    2. margin: 0;
    3. padding: 0;
    4. /* flex 布局 */
    5. display: flex;
    6. justify-content: center;
    7. align-items: center;
    8. min-height: 100vh;
    9. background: #031321;
    10. font-family: 华文琥珀;
    11. }

    应用到了 flex 布局, 将内容显示在屏幕中央

  • a 标签

    1. a{
    2. /* 为绝对定位做参考点 */
    3. position: relative;
    4. display: inline-block;
    5. /* 将文字与线分割开 */
    6. padding: 15px 30px;
    7. color: #2196f3;
    8. /* 文字间隔 */
    9. letter-spacing: 4px;
    10. text-decoration: none;
    11. font-size: 24px;
    12. /* 隐藏越界的线 */
    13. overflow: hidden;
    14. /* 附在 a 上的动画, 触发时和回退时均有效 */
    15. transition: 0.2s;
    16. }

    需要注意的是 transition, 放在 a 标签而不是 a:hover 标签里的原因是, 放在 a 标签, 移入移出均有效果, 而放在 a:hover 中, 移入有效果, 移出没效果

  • a:hover

    1. a:hover{
    2. color: #255784;
    3. background: #2196f3;
    4. /* 多个阴影模拟霓虹灯 */
    5. box-shadow:
    6. 0 0 10px #2196f3,0 0 40px #2196f3,0 0 10px #2196f3,0 0 80px #2196f3;
    7. /* 有延迟 */
    8. transition-delay: 1s;
    9. }

    这里有三个动画, color, backgroud 和 box-shadow, background 由透明变为 #2196f3, 效果对比如下

  • 最重要的移动线条

    1. a span{
    2. position: absolute;
    3. display: block;
    4. }
    5. a span:nth-child(1){
    6. top: 0;
    7. left: -100%;
    8. width: 100%;
    9. height: 2px;
    10. background: linear-gradient(90deg, transparent, #2196f3);
    11. }
    12. a:hover span:nth-child(1){
    13. left: 100%;
    14. transition: 1s;
    15. }

    首先, 将所有的 span 设为绝对定位, a 为相对定位. 将上方的线从左边移动到右边, 在 a 选择器中设置了 overflow: hidden, 因此越界的线被隐藏了. 将 left 固定为 0 的效果如下.

    当left从 -100% 到 100% 是就有了闪过的效果,

  • 再介绍一个右边的线条, 其余的一样

    1. a span:nth-child(2){
    2. right: 0;
    3. top: -100%;
    4. width: 2px;
    5. height: 100%;
    6. background: linear-gradient(180deg, transparent, #2196f3);
    7. }
    8. a:hover span:nth-child(2){
    9. top: 100%;
    10. transition: 1s .25s;
    11. }

    注意, background, 是一根竖线, 宽 2px, 高 100%, 若 top 一直为 0 时效果如下

2. 源码如下

  1. html

    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title></title>
    6. <link rel="stylesheet" href="2020_12_20.css">
    7. </head>
    8. <body>
    9. <a href="#">
    10. <span></span>
    11. <span></span>
    12. <span></span>
    13. <span></span>
    14. 霓虹灯 按钮
    15. </a>
    16. </body>
    17. </html>
  2. css

    1. body{
    2. margin: 0;
    3. padding: 0;
    4. /* flex 布局 */
    5. display: flex;
    6. justify-content: center;
    7. align-items: center;
    8. min-height: 100vh;
    9. background: #031321;
    10. font-family: 华文琥珀;
    11. }
    12. a{
    13. /* 为绝对定位做参考点 */
    14. position: relative;
    15. display: inline-block;
    16. /* 将文字与线分割开 */
    17. padding: 15px 30px;
    18. color: #2196f3;
    19. /* 文字间隔 */
    20. letter-spacing: 4px;
    21. text-decoration: none;
    22. font-size: 24px;
    23. overflow: hidden;
    24. /* 附在 a 上的动画, 触发时和回退时均有效 */
    25. transition: 0.2s;
    26. }
    27. a:hover{
    28. color: #255784;
    29. background: #2196f3;
    30. /* 多个阴影模拟霓虹灯 */
    31. box-shadow:
    32. 0 0 10px #2196f3,0 0 40px #2196f3,0 0 10px #2196f3,0 0 80px #2196f3;
    33. /* 有延迟 */
    34. transition-delay: 1s;
    35. }
    36. a span{
    37. position: absolute;
    38. display: block;
    39. }
    40. a span:nth-child(1){
    41. top: 0;
    42. left: -100%;
    43. width: 100%;
    44. height: 2px;
    45. background: linear-gradient(90deg, transparent, #2196f3);
    46. }
    47. a:hover span:nth-child(1){
    48. left: -100%;
    49. transition: 1s;
    50. }
    51. a span:nth-child(3){
    52. bottom: 0;
    53. left: 100%;
    54. width: 100%;
    55. height: 2px;
    56. background: linear-gradient(270deg, transparent, #2196f3);
    57. }
    58. a:hover span:nth-child(3){
    59. left: -100%;
    60. transition: 1s .5s;
    61. }
    62. a span:nth-child(2){
    63. right: 0;
    64. top: -100%;
    65. width: 2px;
    66. height: 100%;
    67. background: linear-gradient(180deg, transparent, #2196f3);
    68. }
    69. a:hover span:nth-child(2){
    70. top: 100%;
    71. transition: 1s .25s;
    72. }
    73. a span:nth-child(4){
    74. left: 0;
    75. top: 100%;
    76. width: 2px;
    77. height: 100%;
    78. background: linear-gradient(360deg, transparent, #2196f3);
    79. }
    80. a:hover span:nth-child(4){
    81. top: -100%;
    82. transition: 1s .75s;
    83. }

每日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. 【PYTEST】第二章编写测试函数

    知识点: assert 测试函数标记 跳过测试 标记预期失败的测试用例 1. asseet 返回的都是布尔值,等于False(F) 就是失败, assert 有很多 assert something ...

  2. 牛客练习赛71 数学考试 题解(dp)

    题目链接 题目大意 要你求出有多少个长度为n的排列满足m个限制条件 第i个限制条件 p[i]表示前 p[i]个数不能是1-p[i]的排列 题目思路 这个感觉是dp但是不知道怎么dp 首先就是要明白如果 ...

  3. C语言中Linux环境下编译与链接

    编写一个简单的 hello.c 文件,以此为例. 1.编译并链接一个完全包含于一个源文件的C程序. gcc hello.c gcc -Wall hello.c gcc -o hello hello.c ...

  4. Java Stream 源码分析

    前言 Java 8 的 Stream 使得代码更加简洁易懂,本篇文章深入分析 Java Stream 的工作原理,并探讨 Steam 的性能问题. Java 8 集合中的 Stream 相当于高级版的 ...

  5. Redis分布式锁—Redisson+RLock可重入锁实现篇

    前言 平时的工作中,由于生产环境中的项目是需要部署在多台服务器中的,所以经常会面临解决分布式场景下数据一致性的问题,那么就需要引入分布式锁来解决这一问题. 针对分布式锁的实现,目前比较常用的就如下几种 ...

  6. 【Usaco 2009 Gold】JZOJ2020年9月19日提高B组T4 过路费

    [Usaco 2009 Gold]JZOJ2020年9月19日提高B组T4 过路费 题目 Description 跟所有人一样,农夫约翰以着宁教我负天下牛,休叫天下牛负我的伟大精神,日日夜夜苦思生财之 ...

  7. day7(redis的pipline使用)

    1.pipeline原理 redis基本语法:https://www.cnblogs.com/xiaonq/p/7919111.html redis四篇:https://www.cnblogs.com ...

  8. git全流程

    服务器:Ubuntu 使用git前准备工作: 下载git之前先更新: apt-get update 安装git: apt-get install git 创建本地仓库: mkdir test git初 ...

  9. OpenCV阈值处理函数threshold处理32位彩色图像的案例

    ☞ ░ 前往老猿Python博文目录 ░ 一.概述 openCV图像的阈值处理又称为二值化,之所以称为二值化,是它可以将一幅图转换为感兴趣的部分(前景)和不感兴趣的部分(背景).转换时,通常将某个值( ...

  10. moviepy用VideoFileClip加载视频时报UnicodeDecodeError: codec cant decode ,No mapping character 错误

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 昨天处理视频时出现了解码错误,通过修改ffmpeg ...