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 相关文章推荐
不同浏览器对CSS3和HTML5的支持状况
Oct 31 HTML / CSS
用css3写出气球样式的示例代码
Sep 11 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
HTML5中div、article、section的区别及使用介绍
Aug 14 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
Canvas globalCompositeOperation
Dec 18 HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 HTML / CSS
HTML+CSS制作心跳特效的实现
May 26 HTML / CSS
css3手动实现pc端横向滚动
Jun 21 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 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
You might like
php foreach 参数强制类型转换的问题
2010/12/10 PHP
上传文件先创建目录 再上传到目录里面去
2010/12/29 PHP
php创建session的方法实例详解
2015/01/27 PHP
PHP number_format函数原理及实例解析
2020/07/14 PHP
jQuery select操作控制方法小结
2010/05/26 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
使用Python获取Linux系统的各种信息
2014/07/10 Python
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
Python正则抓取新闻标题和链接的方法示例
2017/04/24 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
Django csrf 两种方法设置form的实例
2019/02/03 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
python实现计算器功能
2019/10/31 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
英语专业毕业生自荐信范文
2013/12/31 职场文书
国际贸易个人求职信范文
2014/01/04 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
个人存款证明书
2014/10/18 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
2014年幼儿园后勤工作总结
2014/11/10 职场文书