今天在網路上看到一個酷炫的登入按鈕效果；初看時感覺好牛掰；但是一點一點的拋開以後發現，並沒有那麼難；我會將全部程式碼貼出來；如果有不對的地方，大家指點一哈。
分析
我們拋開before不談的話；其實原理和就是透過背景大小以及配合位置達到顏色漸變的效果。
- text-transform: uppercase；是指將字母轉為大寫
- 然後設定背景和背景大小
- 當滑鼠移入（hover）按鈕時改變其定位即可
效果一：
這種效果的話就不會那麼酷，或者說花俏的；我覺得如果在寫一些效果上，應該這種比較適合一些，然後配合自己需要的顏色即可。
複製程式碼可預覽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 230px;
height: 90px;
line-height: 90px;
text-align: center;
color: #fff;
font-size: 25px;
text-transform: uppercase;
cursor: pointer;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 60px;
}
.btn:hover {
animation: animate 8s linear infinite;
}
@keyframes animate {
0% {
background-position: 0%;
}
100% {
background-position: 400%;
}
}
</style>
</head>
<body>
<b href="#">register</b>
</body>
</html>效果二:
注意：filter: blur(20px )是設定高斯模糊
複製一下程式碼即可預覽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 230px;
height: 90px;
line-height: 90px;
text-align: center;
color: #fff;
font-size: 25px;
text-transform: uppercase;
cursor: pointer;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 60px;
}
.btn:hover {
animation: animate 8s linear infinite;
}
@keyframes animate {
0% {
background-position: 0%;
}
100% {
background-position: 400%;
}
}
.btn::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
z-index: -1;
background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
background-size: 400%;
border-radius: 40px;
opacity: 0;
transition: 0.5s;
}
.btn:hover::before {
filter: blur(20px);
opacity: 1;
animation: animate 8s linear infinite;
}
</style>
</head>
<body>
<b href="#">register</b>
</body>
</html>以上就是今天的全部內容了！大家可以複製以上程式碼，即可展現效果。
看了網路上的各種酷炫樣式以後，發現我真是一個小菜雞；希望在以後的日子裡；多看看網路上寫的酷炫樣式，如果看到有好玩的，到時候到這裡來記錄一下；希望以後會越學越多吧！
推進學習：《css影片教學》
以上是css實作登入按鈕酷炫效果（附程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
@rules具有多少特異性，例如@keyframes和@media？Apr 18, 2025 am 11:34 AM前幾天我得到了這個問題。我的第一個想法是：奇怪的問題！特異性是關於選擇者的，而在符號不是選擇器，那麼...無關緊要？
在NUXT應用程序中創建動態路由Apr 18, 2025 am 10:53 AM在這篇文章中，我們將使用我構建和部署的電子商務商店演示來進行Netlify，以展示如何為傳入數據製作動態路線。這是一個公平的
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
記事本++7.3.1
好用且免費的程式碼編輯器
mPDF
mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
Dreamweaver CS6
視覺化網頁開發工具
