腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

html+css實(shí)現(xiàn)賽博朋克風(fēng)格按鈕

發(fā)布時(shí)間：2021-05-26 16:51:03 作者：北極光之夜。

我要評論

這些年的演變讓朋克變成了緊隨時(shí)代的代名詞，本文實(shí)現(xiàn)html+css實(shí)現(xiàn)賽博朋克風(fēng)格按鈕，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

先看效果：

在這里插入圖片描述

前言：

這個(gè)思路是我在b站看up主Steven做的，覺得很不錯(cuò)，然后自己也弄了一個(gè)。（純css），下面是詳細(xì)過程。最后面有完整代碼。

實(shí)現(xiàn)：

1. 首先定義一個(gè)div標(biāo)簽作為按鈕，類名為 .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; 表示字體，可以去這個(gè)網(wǎng)址，里面有好多種類型的字體。
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); 表示右邊那個(gè)藍(lán)色的陰影。
cursor: pointer; 表示鼠標(biāo)經(jīng)過由箭頭變成顯示為小手。

3. 定義一個(gè)雙偽類，跟 .anniu 長得一摸一樣，通過絕對定位覆蓋住 .anniu，第2步跟 .anniu 的并集選擇器已經(jīng)定義了一樣的基本的樣式，再添加如下樣式：

.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) ; 表示字體的陰影，讓其字體在偏左上和偏右下分別有個(gè)rgb(0, 183, 255)色和rgb(0, 255, 115)色的陰影。
visibility: hidden; 表示隱藏這個(gè)偽類。

4. 通過clip-path: inset（）屬性裁剪區(qū)域和transform: translate（）;偏移顯示出一次效果；
具體意思是如下：
clip-path: inset（）表示可以用裁剪方式創(chuàng)建元素的可顯示區(qū)域（矩形），那么區(qū)域內(nèi)的部分顯示，區(qū)域外的就會(huì)隱藏。
transform: translate（）就是移動(dòng)；

如，對雙偽類進(jìn)行裁剪： clip-path: inset(20% -5px 60% 0); transform: translate（-5px，0）；得如下

在這里插入圖片描述

(20% -5px 60% 0); 表示裁剪偽類從上到下裁剪到20%，從右到左裁剪掉-5px（因?yàn)橐@示陰影，所以是負(fù)的），從下到上裁剪掉60%，從左到右裁剪0%，這樣一來，就只會(huì)剩下中間高剩余20%，寬還多了5px的矩形部分，其余被裁剪掉的邊角料就會(huì)隱藏了，同時(shí)設(shè)置 translate（）讓它往左偏移一點(diǎn)，就得到了上面的效果。

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

在這里插入圖片描述

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

在這里插入圖片描述

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

在這里插入圖片描述

5. 通過第四步的裁剪效果，我們就可以設(shè)置animation動(dòng)畫了，鼠標(biāo)經(jīng)過就顯示偽類不同的裁剪效果與偏移效果，裁剪位置與偏移位置這個(gè)可以根據(jù)自己感覺設(shè)置。

 .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就會(huì)是兩幀，只用一幀是為了卡頓效果更好。end 表示第一幀是第一步動(dòng)畫開始。若為start表示第一幀是第一步動(dòng)畫結(jié)束。

完整代碼：

<!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>

到此這篇關(guān)于html+css實(shí)現(xiàn)賽博朋克風(fēng)格按鈕的文章就介紹到這了,更多相關(guān)html css 賽博朋克風(fēng)格按鈕內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

Tag：HTML css 賽博朋克風(fēng)格按鈕

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

html+css實(shí)現(xiàn)賽博朋克風(fēng)格按鈕

先看效果：

前言：

完整代碼：

相關(guān)文章

最新評論

文章分類

大家感興趣的內(nèi)容

最近更新的內(nèi)容