赛博朋克风格按钮 html+css

最新推荐文章于 2024-05-16 03:09:27 发布
最新推荐文章于 2024-05-16 03:09:27 发布
阅读量9.6k 收藏 79
点赞数 49
分类专栏： css 创意特效大全 前端大杂烩 文章标签： 赛博朋克按钮 html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luo1831251387/article/details/113360844
版权

先看效果：

在这里插入图片描述

前言：

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

实现：

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

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

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

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

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 的并集选择器已经定义了一样的基本的样式，再添加如下样式：

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

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动画了，鼠标经过就显示伪类不同的裁剪效果与偏移效果，裁剪位置与偏移位置这个可以根据自己感觉设置。

 .anniu:hover::after{
           animation: san 1s ; 
           animation-timing-function: steps(1, end);
       }

 @keyframes san{
           0%{
            clip-path: inset(20% -5px  60%  0);
            transform: translate(-6px,5px);
            visibility: visible;
           }
           10%{
            clip-path: inset(50% -5px  30%  0);
            transform: translate(6px,-5px);
           }
           20%{
            clip-path: inset(20% -5px  60%  0);
            transform: translate(5px,0px);

            }
            30%{
                clip-path: inset(80% -5px  5%  0);
            transform: translate(-8px,5px);
            }
            40%{
                clip-path: inset(0 -5px  80%  0);
            transform: translate(-4px,-3px);

            }
            50%{
                clip-path: inset(50% -5px  30%  0);
            transform: translate(-6px,-5px);
            }
            60%{
                clip-path: inset(80% -5px  5%  0);
            transform: translate(-7px,5px);

            }
            70%{
                clip-path: inset(0 -5px  80%  0);
            transform: translate(3px,6px);
            }
            80%{
                clip-path: inset(50% -5px  30%  0);
            transform: translate(5px,5px);

            }
            90%{
                clip-path: inset(20% -5px  60%  0);
            transform: translate(6px,-5px);

            }
            100%{
                clip-path: inset(0 -5px  80%  0);
            transform: translate(1px,5px);

            }
       }

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

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.font.im/css?family=Do+Hyeon" rel="stylesheet">
    <style>
       *{
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }
       body{
           height: 100vh;
           display: flex;
           align-items: center;
           justify-content: center;
           background-color: rgb(243, 239, 8);
       }
       .anniu,.anniu::after{
           font-family: 'Do Hyeon', sans-serif;
           width: 260px;
           height: 80px;
           text-align: center;
           font-size: 22px;
           line-height: 80px;
           color: rgb(255, 251, 251);
           background: linear-gradient(30deg,transparent 10%,rgb(255, 136, 0) 10% 95%,  rgb(0, 255, 149) 95%);
           box-shadow: 5px 0 0 rgb(0, 204, 255);
           cursor: pointer;
           position: relative;
       }
       .anniu::after{
           content: 'Aurora Borealis night';
           position: absolute;
           top: 0;
           left: 0;
           text-shadow: -5px -2px 0 rgb(0, 183, 255),
           5px 2px 0 rgb(0, 255, 115) ;
           visibility: hidden;
          
       } 
       .anniu:hover::after{
           animation: san 1s ; 
           animation-timing-function: steps(1, end);
       }

       /* 
       
       clip-path: inset(20% -5px  60%  0);
       clip-path: inset(50% -5px  30%  0);
       clip-path: inset(80% -5px  5%  0);
       clip-path: inset(0 -5px  80%  0);
       
       
        */
       @keyframes san{
           0%{
            clip-path: inset(20% -5px  60%  0);
            transform: translate(-6px,5px);
            visibility: visible;
           }
           10%{
            clip-path: inset(50% -5px  30%  0);
            transform: translate(6px,-5px);
           }
           20%{
            clip-path: inset(20% -5px  60%  0);
            transform: translate(5px,0px);

            }
            30%{
                clip-path: inset(80% -5px  5%  0);
            transform: translate(-8px,5px);
            }
            40%{
                clip-path: inset(0 -5px  80%  0);
            transform: translate(-4px,-3px);

            }
            50%{
                clip-path: inset(50% -5px  30%  0);
            transform: translate(-6px,-5px);
            }
            60%{
                clip-path: inset(80% -5px  5%  0);
            transform: translate(-7px,5px);

            }
            70%{
                clip-path: inset(0 -5px  80%  0);
            transform: translate(3px,6px);
            }
            80%{
                clip-path: inset(50% -5px  30%  0);
            transform: translate(5px,5px);

            }
            90%{
                clip-path: inset(20% -5px  60%  0);
            transform: translate(6px,-5px);

            }
            100%{
                clip-path: inset(0 -5px  80%  0);
            transform: translate(1px,5px);

            }
       }
    </style>
</head>
<body>
    <div class="anniu">Aurora Borealis night</div>
</body>
</html>

总结：

有帮助的话就点个赞吧~

其它文章：
响应式卡片悬停效果 html+css
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
炫彩流光按钮 html+css
记一些css属性总结（一）
Sass总结笔记

等等等…

写之前：
在这里插入图片描述
写之中：
在这里插入图片描述
写完后：
在这里插入图片描述

对了，还有这首歌很好听：
是什么让我遇见这样的你-白安

byebye了~

北极光之夜。
关注
  • 49
    点赞
  • 踩
  • 79
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 10
    评论
专栏目录
纯 CSS 制作赛博朋克 2077 “故障风”按钮
CodingStartup的博客
12-22 555
纯 CSS 制作赛博朋克 2077 “故障风”按钮 大家好，我是 Steven。 虽然我不打机，但我都知道 赛博朋克 2077 这个游戏，在它的网页上，有一个 Available Now 的按钮，当游标移到它之上的时候，会有一个好像故障的毛刺效果。 这一期，我们就会模仿并且实现这个效果。 这个教程的视频版在 https://www.bilibili.com/video/BV15A411s7cX ，欢迎三连关注！ 编写 HTML 代码 打开 CodePen 编辑器 ( https://codepen.io
CSS之帅气朋克字体效果以及“故障风”按钮的实现（图片+按钮）
Xmumu_的博客
07-24 739
欢迎来到HTML部件频道????前言????CSS伪元素 前言???? 今天来实现一个帅气的朋克效果，这个效果是我很早之前就想出的一篇博客，今天补上，先来看一下效果吧???? 这次的效果主要是通过“clip-path:inset”实现的，可以看到当点击的时候有一种“切割”的感觉，所以在这里分片肯定是不能少的，利用button的伪元素去控制元素的各个部分就Ok,再加上动画去切换分片的位置，来实现晃动的效果???? CSS伪元素 如果有朋友还对CSS伪元素不了解，可以看一下该简单说明和应用，还是非常的详细的：C
一定能用到的简单但实用的五种按钮样式（原生HTML+CSS步骤详解，含详细注释）(1)
最新发布
2301_78145364的博客
05-16 1255
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
CSS实现赛博朋克风格按钮
TBDBTUO的博客
06-20 567
赛博朋克背景 赛博朋克（Cyberpunk）是“控制论、神经机械学”与“朋克”的结合词，背景大都建立于“低端生活与高等科技的结合”，拥有先进的科学技术，再以一定程度崩坏的社会结构做对比；拥有五花八门的视觉冲击效果，如街头的霓虹灯、街排标志性广告以及高楼建筑等，通常搭配色彩是以黑、紫、绿、蓝、红为主。其中菲利普·狄克所著作的《仿生人会梦到电子羊吗？》最受注目，小说亦被改编成电影《银翼杀手》。总的来讲，赛博朋克的风格主线，就是反应出科技高度发展的人类文明，与脆弱渺小的人类个体之间的强烈反差，同时外界与内在，钢铁
赛博朋克风格按钮样式
qq_40965036的博客
11-09 319
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="preconnect" type="text/css" href="https://fonts.gstatic.com"/> <link rel="stylesheet" type="text/css" href="https://fonts.
赛博朋克按钮.html
02-08
赛博朋克按钮.html
html css变成赛博朋克风格按钮
yunduanaoligei的博客
08-24 302
这么多年的演化让朋克风变成了紧随时期的代名词，文中完成html css变成赛博朋克风格按钮，具备一定的参考价值，有兴趣的小伙伴们能够参照一下 先看效果： watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk= 前言： 这个思路是我在b站看up主Steven做的，觉得很不错，然后自己也弄了一个。（纯css），下面是详细过程。最后面有完整代码。 实现
多彩霓虹灯赛博朋克风格照片处理效果ps动作素材下载.rar
12-28
在本资源中，我们主要关注的是使用Adobe Photoshop的"多彩霓虹灯赛博朋克风格照片处理效果"PS动作。这种动作是一种预设的编辑序列，可以一键应用，为您的照片创造出独特的赛博朋克视觉风格，其特点通常包括鲜艳的...
赛博朋克风格素材集锦合计
08-10
所有可以实现的赛博朋克风格
静态网页设计期末课设赛博朋克2077官网主页改编
01-30
该资源主要由HTML5+CSS3相关理论知识开发而成，包含一个主网页加八个子网页，还包含音频视频以及其他相关知识，内容充实，界面美观，结构合理，操作方便。能在一般屏幕分辨率下正常显示作品页面内容水平居中操作方便...
赛博朋克V1.5版完整安装文件
02-21
压缩包共16个。解压后运行文件bin\x64\Cyberpunk2077.exe。
牛B！纯 CSS 制作赛博朋克 2077 “故障风”按钮
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
01-03 576
（给前端瓶子君加星标）转自：CodingStarupjuejin.cn/post/6908565208596217863大家好，我是 Steven。虽然我不打机，但我都知道赛博朋克 2...
赛博朋克 “故障风”按钮
mslmsl66的博客
12-29 1226
先放个实现效果 整体借鉴思路 https://mp.weixin.qq.com/s/zf6cIjlDFhg_2qH6hQghNg 这里说下比较关键的点： 1. 按钮左下角的隐藏 /* 45°斜角，从透明变色到红色 */ background:linear-gradient(45deg,transparent5%,red15%); 2. 故障动画 2.1 需要一个样式相同的伪元素，覆盖在按钮上。并且按钮设置text-shadow阴影（造成视觉上的光亮模糊） 2.2 通过clip...
css-赛博朋克风动画组件
莫兮的博客
04-23 733
css-赛博朋克风动画组件 目录 文章目录前言结果展示代码 前言 Tutorials收费课程中的一种实现。 实现思路： 先绘制盒子 制作动画，通过颜色位置变化来实现流转 -webkit-box-reflect: below 2px linear-gradient(transparent,#0005);实现倒影 所用功能： border-sizing justify-content display overflow transition -webkit-box-reflect box-sh
仅用 CSS 实现赛博朋克 2077 风格视觉效果
zz_jesse的博客
07-21 1561
点击上方关注前端技术江湖，一起学习，天天进步作者dragonir原文链接：https://juejin.cn/post/6972759988632551460文章开始之前先简单了解下...
仅用 CSS 实现赛博朋克 2077 风格视觉效果，html的介绍及常用标签
2301_78416543的博客
03-31 672
50% {0%, 100% {50% {为了使文字看起来更有霓虹效果，以上示例使用了neon字体：s3-us-west-2.amazonaws.com/s.cdpn.io/7…[1]
仅用CSS几步实现赛博朋克2077风格视觉效果
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
07-16 533
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群背景文章开始之前先简单了解下什么是 赛博朋克，以及什么是 赛博朋克2077。赛博朋克（Cyberpunk）是背景大都...
CSS几步实现赛博朋克2077风格视觉效果
weixin_45032957的博客
06-15 355
故障效果主要通过 clip-path: inset 和动画实现。利用 button 的伪元素 ::after，给它定义多个分片 --slice 变量，并通过动画切换切片的位置，来实现晃动效果。其中clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。 inset() 方法用于定义一个矩形，可以传入 5 个参数，分别对应 top，right，bottom，left的裁剪位置及 round 和 radius（可选，圆角），它的基本语法如下： inset( {1,4} [ ro
用html+css+js实现一个赛博朋克风格的登录界面
05-18
好的，我可以给您提供一个简单的赛博朋克风格的登录界面示例代码，您可以根据自己的需要进行修改和完善。以下是代码： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>Cyberpunk Login</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <h1>Cyberpunk Login</h1> <form> <div class="form-group"> <label for="username">Username:</label> <input type="text" id="username" name="username" placeholder="Enter username"> </div> <div class="form-group"> <label for="password">Password:</label> <input type="password" id="password" name="password" placeholder="Enter password"> </div> <button type="submit" class="btn">Login</button> </form> </div> </body> </html> ``` CSS代码： ``` body { background-color: #000; color: #fff; font-family: 'Courier New', Courier, monospace; font-size: 20px; } .container { width: 500px; margin: 0 auto; text-align: center; padding-top: 100px; } h1 { font-size: 50px; margin-bottom: 50px; } form { display: inline-block; text-align: left; } .form-group { margin-bottom: 20px; } label { display: block; margin-bottom: 5px; } input[type="text"], input[type="password"] { width: 100%; padding: 10px; font-size: 20px; background-color: #1b1b1b; border: none; color: #fff; } .btn { background-color: #3d3d3d; color: #fff; padding: 10px 20px; border: none; cursor: pointer; transition: background-color 0.5s ease; } .btn:hover { background-color: #ff4500; } ``` JS代码： ``` // 这里可以添加验证登录的逻辑 ``` 以上代码实现了一个简单的赛博朋克风格的登录界面，包括用户名和密码输入框以及登录按钮。您可以根据自己的需要进行修改和完善，例如添加背景图片、特效等等。希望对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北极光之夜。

谢谢~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值