先看效果：
前言：
這個思路是我在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 賽博朋克風格按鈕 內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
