話不多，先看效果：

回歸老本行，繼續(xù)分享簡單有趣的CSS創(chuàng)意特效，放松放松心情~

實現(xiàn)過程(完整源碼在最后)：

1 老樣子，定義基本樣式：

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'fangsong';

}

body{

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background-color: rgb(0, 0, 0);

}

font-family: ‘fangsong’; 仿宋字體。

display: flex;

align-items: center;

justify-content: center; flex布局，讓按鈕在屏幕居中。

2.定義基本標簽：

aurora

aurora

aurora

3個a標簽就對應3個按鈕，每個按鈕里4個span就是環(huán)繞按鈕的4條邊。

且都有個公共的選擇器 .item 和 只屬于自己的選擇器。

3.定義每個按鈕的基本樣式：

.item{

position: relative;

margin: 50px;

width: 300px;

height: 80px;

text-align: center;

line-height: 80px;

text-transform: uppercase;

text-decoration: none;

font-size: 35px;

letter-spacing: 5px;

color: aqua;

overflow: hidden;

-webkit-box-reflect: below 1px linear-gradient( transparent,rgba(6, 133, 133,0.3));

}

text-align: center;文字對齊方式。

line-height: 80px; 字行高。

text-transform: uppercase; 字母為大寫。

text-decoration: none; 去掉a標簽默認下劃線。

letter-spacing: 5px; 每個字符間的距離。

overflow: hidden;溢出隱藏。

-webkit-box-reflect: below 1px linear-gradient( transparent,rgba(6, 133, 133,0.3)); 這個屬性能實現(xiàn)倒影效果。

4. 鼠標經(jīng)過按鈕樣式改變：

.item:hover{

background-color: aqua;

box-shadow:0 0 5px aqua,

0 0 75px aqua,

0 0 155px aqua;

color: black;

}

box-shadow:0 0 5px aqua,

0 0 75px aqua,

0 0 155px aqua; 陰影，寫多行可以疊加更亮。

5.設置環(huán)繞按鈕的4根線上面那條的樣式：

.item span:nth-of-type(1){

position: absolute;

left: -100%;

width: 100%;

height: 3px;

background-image: linear-gradient(to left,aqua ,transparent);

animation: shang 1s linear infinite;

}

@keyframes shang{

0%{

left:-100%;

}

50%,100%{

left:100%;

}

}

position: absolute;

left: -100%; 定位在對應位置。

background-image: linear-gradient(to left,aqua ,transparent); 線性漸變顏色。

animation: shang 1s linear infinite; 動畫屬性，讓它動起來。

5.以此類推，設置環(huán)繞按鈕的其它3根樣式：

.item span:nth-of-type(2){

position: absolute;

top: -100%;

right: 0;

width: 3px;

height: 100%;

background-image: linear-gradient(to top,aqua ,transparent);

animation: you 1s linear infinite;

animation-delay: 0.25s;

}

@keyframes you{

0%{

top:-100%;

}

50%,100%{

top:100%;

}

}

.item span:nth-of-type(3){

position: absolute;

right: -100%;

bottom: 0;

width: 100%;

height: 3px;

background-image: linear-gradient(to right,aqua ,transparent);

animation: xia 1s linear infinite;

animation-delay: 0.5s;

}

@keyframes xia{

0%{

right:-100%;

}

50%,100%{

right:100%;

}

}

.item span:nth-of-type(4){

position: absolute;

bottom: -100%;

left: 0;

width: 3px;

height: 100%;

background-image: linear-gradient(to bottom,aqua ,transparent);

animation: zuo 1s linear infinite;

animation-delay: 0.75s;

}

@keyframes zuo{

0%{

bottom:-100%;

}

50%,100%{

bottom:100%;

}

}

animation-delay: 0.75s; 動畫延遲執(zhí)行。每條線對應延遲一段時間，形成時間差，形成環(huán)繞效果。

6.給第一，第三個按鈕設置其它顏色：

.item1{

filter: hue-rotate(100deg);

}

.item3{

filter: hue-rotate(250deg);

}

filter: hue-rotate(100deg); 用色相旋轉(zhuǎn)，這樣不管背景還是陰影顏色都變了。

完整代碼：

Document

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'fangsong';

}

body{

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

background-color: rgb(0, 0, 0);

}

.item{

position: relative;

margin: 50px;

width: 300px;

height: 80px;

text-align: center;

line-height: 80px;

text-transform: uppercase;

text-decoration: none;

font-size: 35px;

letter-spacing: 5px;

color: aqua;

overflow: hidden;

-webkit-box-reflect: below 1px linear-gradient( transparent,rgba(6, 133, 133,0.3));

}

.item:hover{

background-color: aqua;

box-shadow:0 0 5px aqua,

0 0 75px aqua,

0 0 155px aqua;

color: black;

}

.item span:nth-of-type(1){

position: absolute;

left: -100%;

width: 100%;

height: 3px;

background-image: linear-gradient(to left,aqua ,transparent);

animation: shang 1s linear infinite;

}

@keyframes shang{

0%{

left:-100%;

}

50%,100%{

left:100%;

}

}

.item span:nth-of-type(2){

position: absolute;

top: -100%;

right: 0;

width: 3px;

height: 100%;

background-image: linear-gradient(to top,aqua ,transparent);

animation: you 1s linear infinite;

animation-delay: 0.25s;

}

@keyframes you{

0%{

top:-100%;

}

50%,100%{

top:100%;

}

}

.item span:nth-of-type(3){

position: absolute;

right: -100%;

bottom: 0;

width: 100%;

height: 3px;

background-image: linear-gradient(to right,aqua ,transparent);

animation: xia 1s linear infinite;

animation-delay: 0.5s;

}

@keyframes xia{

0%{

right:-100%;

}

50%,100%{

right:100%;

}

}

.item span:nth-of-type(4){

position: absolute;

bottom: -100%;

left: 0;

width: 3px;

height: 100%;

background-image: linear-gradient(to bottom,aqua ,transparent);

animation: zuo 1s linear infinite;

animation-delay: 0.75s;

}

@keyframes zuo{

0%{

bottom:-100%;

}

50%,100%{

bottom:100%;

}

}

.item1{

filter: hue-rotate(100deg);

}

.item3{

filter: hue-rotate(250deg);

}

aurora

aurora

aurora

總結：

總結

以上是生活随笔為你收集整理的html按钮线性炫光,6分钟实现CSS炫光倒影按钮 html+css的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。