首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

html+css实现赛博朋克风格按钮

Posted in HTML / CSS onMay 26, 2021

先看效果：

html+css实现赛博朋克风格按钮

前言：

这个思路是我在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）；得如下

html+css实现赛博朋克风格按钮
 

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

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

html+css实现赛博朋克风格按钮
 

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

html+css实现赛博朋克风格按钮
 

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

html+css实现赛博朋克风格按钮

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实现赛博朋克风格按钮

- Author -

北极光之夜。

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
HTML5 Video标签的属性、方法和事件汇总介绍
Apr 24 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 HTML / CSS
HTML+CSS制作心跳特效的实现
浅谈CSS不规则边框的生成方案
May 25 #HTML / CSS
详解CSS故障艺术
HTML中的表单Form实现居中效果
May 25 #HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
CSS filter 有什么神奇用途
HTML5来实现本地文件读取和写入的实现方法
May 25 #HTML / CSS
内存泄露(1) ResNet50(1) 小喇叭开始广播了(1) Xception(1) Lifecycle(1) 小喇叭(1) 温控(1) Spring(9) PostMapping(1) 微信(2)
You might like
PHP生成便于打印的网页
2006/10/09 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
基于jQuery的弹出警告对话框美化插件(警告，确认和提示)
2010/06/10 Javascript
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
简单实例处理url特殊符号&amp;处理(2种方法)
2013/04/02 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
Bootstrap每天必学之按钮（一）
2015/11/24 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
微信小程序保存图片到相册权限设置
2020/04/09 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
javascript实现移动端轮播图
2020/12/09 Javascript
[03:03]2014DOTA2西雅图国际邀请赛 Alliance战队巡礼
2014/07/07 DOTA
[01:35:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第一场 1月18日
2021/03/11 DOTA
Python简明入门教程
2015/08/04 Python
用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动
2015/11/05 Python
在Python程序和Flask框架中使用SQLAlchemy的教程
2016/06/06 Python
Python while 循环使用的简单实例
2016/06/08 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
Python实现GUI学生信息管理系统
2020/04/05 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
Flesh Beauty官网：露华浓集团旗下彩妆品牌
2021/02/15 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
金融专业个人的自我评价
2013/10/18 职场文书
餐饮业的创业计划书范文
2013/12/26 职场文书
《邮票齿孔的故事》教学反思
2014/02/22 职场文书
浅谈Python中的正则表达式
2021/06/28 Python
用Python编写简单的gRPC服务的详细过程
2021/07/04 Python
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python