炫彩流光按钮
做這個(gè)的話(huà)主要就是利用了基礎(chǔ)的html css以及css3的漸變背景以及關(guān)鍵幀動(dòng)畫(huà)
基本結(jié)構(gòu)如下：
<a href="" class="btn">button</a>基本樣式如下：
* {margin: 0;padding: 0; }a {text-decoration: none;color: #fff; }body {height: 100vh;display: flex;/* 水平居中 */justify-content: center;/* 垂直居中 */align-items: center;background-color: #000; }.btn {position: relative;display: inline-block;width: 220px;height: 80px;line-height: 80px;font-size: 35px;text-transform: uppercase;text-align: center;border-radius: 30px;/* 漸變背景 */background: linear-gradient(90deg,rgb(39,122,218),rgb(74,230,121),rgb(201,214,13),rgb(226,20,233),rgb(16,172,219));background-size: 400%;z-index: 1;/* 設(shè)置文字陰影 這里寫(xiě)兩行是為了讓字體給人的感覺(jué)是更亮 */text-shadow: 0 0 5px white,0 0 5px white; }鼠標(biāo)經(jīng)過(guò)時(shí)的動(dòng)畫(huà)效果：
/* 鼠標(biāo)經(jīng)過(guò)時(shí)的動(dòng)畫(huà)效果 */ .btn:hover {animation: move 5s linear alternate infinite; }@keyframes move {0% {background-position: 0%;}100% {background-position: 100%;} }定義盒子周?chē)墓鈺?#xff1a;
/* 定義盒子周?chē)墓鈺?*/ .btn::before {content: "";position: absolute;top: -10px;left: -10px;width: 240px;height: 100px;/* 漸變背景 */background: linear-gradient(90deg,rgb(39,122,218),rgb(74,230,121),rgb(243,169,10),rgb(226,20,233),rgb(16,172,219));background-size: 400%;opacity: 0;z-index: -1;border-radius: 45px;transform: .6s; }.btn:hover::before {/* 設(shè)置高斯模糊 */filter: blur(15px);opacity: 1;animation: move 8s linear alternate infinite; }?
?
源碼：
<!DOCTYPE html> <html lang="en"> <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><link rel="stylesheet" href="index.css"> </head> <body><a href="" class="btn">button</a> </body> </html> * {margin: 0;padding: 0; }a {text-decoration: none;color: #fff; }body {height: 100vh;display: flex;/* 水平居中 */justify-content: center;/* 垂直居中 */align-items: center;background-color: #000; }.btn {position: relative;display: inline-block;width: 220px;height: 80px;line-height: 80px;font-size: 35px;text-transform: uppercase;text-align: center;border-radius: 30px;/* 漸變背景 */background: linear-gradient(90deg,rgb(39,122,218),rgb(74,230,121),rgb(201,214,13),rgb(226,20,233),rgb(16,172,219));background-size: 400%;z-index: 1;/* 設(shè)置文字陰影這里寫(xiě)兩行是為了讓字體給人的感覺(jué)是更亮 */text-shadow: 0 0 5px white,0 0 5px white; }/* 鼠標(biāo)經(jīng)過(guò)時(shí)的動(dòng)畫(huà)效果 */ .btn:hover {animation: move 5s linear alternate infinite; }@keyframes move {0% {background-position: 0%;}100% {background-position: 100%;} }/* 定義盒子周?chē)墓鈺?*/ .btn::before {content: "";position: absolute;top: -10px;left: -10px;width: 240px;height: 100px;/* 漸變背景 */background: linear-gradient(90deg,rgb(39,122,218),rgb(74,230,121),rgb(243,169,10),rgb(226,20,233),rgb(16,172,219));background-size: 400%;opacity: 0;z-index: -1;border-radius: 45px;transform: .6s; }.btn:hover::before {/* 設(shè)置高斯模糊 */filter: blur(15px);opacity: 1;animation: move 8s linear alternate infinite; }總結(jié)
- 上一篇： Forth 内存布局
- 下一篇： java游戏实例_Java游戏俄罗斯方块