经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS » 查看文章
html+css实现赛博朋克风格按钮 _HTML/Xhtml
来源：jb51　　时间：2021/5/31 10:59:32　　对本文有异议

先看效果：

在这里插入图片描述

前言：

这个思路是我在b站看up主Steven做的，觉得很不错，然后自己也弄了一个。（纯css），下面是详细过程。最后面有完整代码。

实现：

1. 首先定义一个div标签作为按钮，类名为 .anniu：

  1.  <div class="anniu">Aurora Borealis night</div>

2. .anniu 的css基本样式，长宽，字体大小等：

  1. .anniu,.anniu::after{
  2.            font-family: 'Do Hyeon', sans-serif;
  3.            width: 260px;
  4.            height: 80px;
  5.            text-align: center;
  6.            font-size: 22px;
  7.            line-height: 80px;
  8.            color: rgb(255, 251, 251);
  9.            background: linear-gradient(30deg,transparent 10%,rgb(255, 136, 0) 10% 95%,  rgb(0, 255, 149) 95%);
  10.            box-shadow: 5px 0 0 rgb(0, 204, 255);
  11.            cursor: pointer;
  12.            position: relative;
  13.        }

font-family: ‘Do Hyeon’, sans-serif; 表示字体，可以去这个网址，里面有好多种类型的字体。
background: linear-gradient(30deg,transparent 10%,rgb(255, 136, 0) 10% 95%, rgb(0, 255, 149) 95%);
巧妙利用背景色做出裁掉角的形状。这句语句表示以30度角开始显示渐变颜色，0到10%显示transparent透明色，10%到95%显示橘色，95%到100%显示绿色。
box-shadow: 5px 0 0 rgb(0, 204, 255); 表示右边那个蓝色的阴影。
cursor: pointer; 表示鼠标经过由箭头变成显示为小手。

3. 定义一个双伪类，跟 .anniu 长得一摸一样，通过绝对定位覆盖住 .anniu，第2步跟 .anniu 的并集选择器已经定义了一样的基本的样式，再添加如下样式：

  1. .anniu::after{
  2.            content: 'Aurora Borealis night';
  3.            position: absolute;
  4.            top: 0;
  5.            left: 0;
  6.            text-shadow: -5px -2px 0 rgb(0, 183, 255),
  7.            5px 2px 0 rgb(0, 255, 115) ;
  8.            visibility: hidden;
  9.           
  10.        }

text-shadow: -5px -2px 0 rgb(0, 183, 255),
5px 2px 0 rgb(0, 255, 115) ; 表示字体的阴影，让其字体在偏左上和偏右下分别有个rgb(0, 183, 255)色和rgb(0, 255, 115)色的阴影。
visibility: hidden; 表示隐藏这个伪类。

4. 通过clip-path: inset（）属性裁剪区域和transform: translate（）;偏移显示出一次效果；
具体意思是如下：
clip-path: inset（）表示可以用裁剪方式创建元素的可显示区域（矩形），那么区域内的部分显示，区域外的就会隐藏。
transform: translate（）就是移动；

如，对双伪类进行裁剪： clip-path: inset(20% -5px 60% 0); transform: translate（-5px，0）；得如下

在这里插入图片描述
 

(20% -5px 60% 0); 表示裁剪伪类从上到下裁剪到20%，从右到左裁剪掉-5px（因为要显示阴影，所以是负的），从下到上裁剪掉60%，从左到右裁剪0%，这样一来，就只会剩下中间高剩余20%，宽还多了5px的矩形部分，其余被裁剪掉的边角料就会隐藏了，同时设置 translate（）让它往左偏移一点，就得到了上面的效果。

接下来再裁剪3次伪类的效果。
clip-path: inset(50% -5px 30% 0);得：

在这里插入图片描述
 

clip-path: inset(80% -5px 5% 0)；得：

在这里插入图片描述
 

clip-path: inset(0 -5px 80% 0);得：
 

在这里插入图片描述

5. 通过第四步的裁剪效果，我们就可以设置animation动画了，鼠标经过就显示伪类不同的裁剪效果与偏移效果，裁剪位置与偏移位置这个可以根据自己感觉设置。

  1.  .anniu:hover::after{
  2.            animation: san 1s ; 
  3.            animation-timing-function: steps(1, end);
  4.        }
  1.  @keyframes san{
  2.            0%{
  3.             clip-path: inset(20% -5px  60%  0);
  4.             transform: translate(-6px,5px);
  5.             visibility: visible;
  6.            }
  7.            10%{
  8.             clip-path: inset(50% -5px  30%  0);
  9.             transform: translate(6px,-5px);
  10.            }
  11.            20%{
  12.             clip-path: inset(20% -5px  60%  0);
  13.             transform: translate(5px,0px);
  14.  
  15.             }
  16.             30%{
  17.                 clip-path: inset(80% -5px  5%  0);
  18.             transform: translate(-8px,5px);
  19.             }
  20.             40%{
  21.                 clip-path: inset(0 -5px  80%  0);
  22.             transform: translate(-4px,-3px);
  23.  
  24.             }
  25.             50%{
  26.                 clip-path: inset(50% -5px  30%  0);
  27.             transform: translate(-6px,-5px);
  28.             }
  29.             60%{
  30.                 clip-path: inset(80% -5px  5%  0);
  31.             transform: translate(-7px,5px);
  32.  
  33.             }
  34.             70%{
  35.                 clip-path: inset(0 -5px  80%  0);
  36.             transform: translate(3px,6px);
  37.             }
  38.             80%{
  39.                 clip-path: inset(50% -5px  30%  0);
  40.             transform: translate(5px,5px);
  41.  
  42.             }
  43.             90%{
  44.                 clip-path: inset(20% -5px  60%  0);
  45.             transform: translate(6px,-5px);
  46.  
  47.             }
  48.             100%{
  49.                 clip-path: inset(0 -5px  80%  0);
  50.             transform: translate(1px,5px);
  51.  
  52.             }
  53.        }

visibility: visible; 让伪类显示。
animation-timing-function: steps(1, end); 1表示0%到10%，10%到20%，…它们之间只用一帧，若写2就会是两帧，只用一帧是为了卡顿效果更好。end 表示第一帧是第一步动画开始。若为start表示第一帧是第一步动画结束。

完整代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <link href="https://fonts.font.im/css?family=Do+Hyeon" rel="stylesheet">
  8.     <style>
  9.        *{
  10.            margin: 0;
  11.            padding: 0;
  12.            box-sizing: border-box;
  13.        }
  14.        body{
  15.            height: 100vh;
  16.            display: flex;
  17.            align-items: center;
  18.            justify-content: center;
  19.            background-color: rgb(243, 239, 8);
  20.        }
  21.        .anniu,.anniu::after{
  22.            font-family: 'Do Hyeon', sans-serif;
  23.            width: 260px;
  24.            height: 80px;
  25.            text-align: center;
  26.            font-size: 22px;
  27.            line-height: 80px;
  28.            color: rgb(255, 251, 251);
  29.            background: linear-gradient(30deg,transparent 10%,rgb(255, 136, 0) 10% 95%,  rgb(0, 255, 149) 95%);
  30.            box-shadow: 5px 0 0 rgb(0, 204, 255);
  31.            cursor: pointer;
  32.            position: relative;
  33.        }
  34.        .anniu::after{
  35.            content: 'Aurora Borealis night';
  36.            position: absolute;
  37.            top: 0;
  38.            left: 0;
  39.            text-shadow: -5px -2px 0 rgb(0, 183, 255),
  40.            5px 2px 0 rgb(0, 255, 115) ;
  41.            visibility: hidden;
  42.           
  43.        } 
  44.        .anniu:hover::after{
  45.            animation: san 1s ; 
  46.            animation-timing-function: steps(1, end);
  47.        }
  48.  
  49.        /* 
  50.        
  51.        clip-path: inset(20% -5px  60%  0);
  52.        clip-path: inset(50% -5px  30%  0);
  53.        clip-path: inset(80% -5px  5%  0);
  54.        clip-path: inset(0 -5px  80%  0);
  55.        
  56.        
  57.         */
  58.        @keyframes san{
  59.            0%{
  60.             clip-path: inset(20% -5px  60%  0);
  61.             transform: translate(-6px,5px);
  62.             visibility: visible;
  63.            }
  64.            10%{
  65.             clip-path: inset(50% -5px  30%  0);
  66.             transform: translate(6px,-5px);
  67.            }
  68.            20%{
  69.             clip-path: inset(20% -5px  60%  0);
  70.             transform: translate(5px,0px);
  71.  
  72.             }
  73.             30%{
  74.                 clip-path: inset(80% -5px  5%  0);
  75.             transform: translate(-8px,5px);
  76.             }
  77.             40%{
  78.                 clip-path: inset(0 -5px  80%  0);
  79.             transform: translate(-4px,-3px);
  80.  
  81.             }
  82.             50%{
  83.                 clip-path: inset(50% -5px  30%  0);
  84.             transform: translate(-6px,-5px);
  85.             }
  86.             60%{
  87.                 clip-path: inset(80% -5px  5%  0);
  88.             transform: translate(-7px,5px);
  89.  
  90.             }
  91.             70%{
  92.                 clip-path: inset(0 -5px  80%  0);
  93.             transform: translate(3px,6px);
  94.             }
  95.             80%{
  96.                 clip-path: inset(50% -5px  30%  0);
  97.             transform: translate(5px,5px);
  98.  
  99.             }
  100.             90%{
  101.                 clip-path: inset(20% -5px  60%  0);
  102.             transform: translate(6px,-5px);
  103.  
  104.             }
  105.             100%{
  106.                 clip-path: inset(0 -5px  80%  0);
  107.             transform: translate(1px,5px);
  108.  
  109.             }
  110.        }
  111.     </style>
  112. </head>
  113. <body>
  114.     <div class="anniu">Aurora Borealis night</div>
  115. </body>
  116. </html>

到此这篇关于html+css实现赛博朋克风格按钮 的文章就介绍到这了,更多相关html css 赛博朋克风格按钮 内容请搜索w3xue以前的文章或继续浏览下面的相关文章，希望大家以后多多支持w3xue！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号