跳转至内容
上海创厦网络科技
IT服务专家
上海创厦网络科技上海创厦网络科技
  • 首页
  • 网站建设
  • IT服务
  • 平面设计
  • 网络工程
  • 首页
  • 网站建设
  • IT服务
  • 平面设计
  • 网络工程

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

您在这里:
  1. 首页
  2. HTML
  3. html+…

先看效果:

前言:

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

实现:

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

1

Aurora Borealis night

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

1
2
3
4
5
6
7
8
9
10
11
12
13

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

1
2
3
4
5
6
7
8
9
10

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

1
2
3
4

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

@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表示第一帧是第一步动画结束。

完整代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116




    
    
    Document
         



    

Aurora Borealis night


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

Category: HTMLstartupplaza2022年5月30日评论

作者: startupplaza

文章导航

历史的文章历史的文章:html+css实现分层金字塔的实例未来的文章未来的文章:在HTML中限制input 输入框只能输入纯数字的实现

Related Posts

HTML表格跨行跨列操作(rowspan、colspan)
2022年5月30日
html中使用vue-router的示例代码
2022年5月30日
前端页面弹框遮罩禁止页面滚动
2022年5月30日
HTML基本标签及结构详解
2022年5月30日
html 指定页面字符集的两种方法
2022年5月30日
当div设置contentEditable=true时,重置其内容后无法光标定位
2022年5月30日

技术探讨

  • 使用HTML5捕捉音频与视频信息概述及实例
  • HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
  • 详解HTML5中的