使用CSS實(shí)現(xiàn)按鈕邊緣跑馬燈動(dòng)畫(huà)
csdn 發(fā)布時(shí)間：2023-04-28 14:49:39 作者：北極光之夜。 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了使用CSS實(shí)現(xiàn)按鈕邊緣跑馬燈動(dòng)畫(huà),技術(shù)上只使用了css+html,還是非常容易學(xué)習(xí)的，文中提供了詳細(xì)的代碼,需要的朋友可以參考下
先來(lái)看看效果：
制作過(guò)程：
1. 定義標(biāo)簽，a標(biāo)簽是按鈕，4個(gè)span就是按鈕周?chē)撬臈l行動(dòng)的藍(lán)邊。：
<a href="https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343" class="night" target="blank">
<span></span>
<span></span>
<span></span>
<span></span>
night
</a>
2. 定義按鈕.night的基本樣式：
.night{
position: relative;
width: 300px;
height: 100px;
color: rgb(18, 190, 243);
letter-spacing: 12px;
font-size: 50px;
line-height: 100px;
text-align: center;
/* background-color: rgb(31, 49, 133); */
background-image: linear-gradient(90deg, rgb(40, 62, 161) 50%,rgb(31, 49, 133) 50% );
text-transform: uppercase;
user-select: none;
text-decoration: none;
overflow: hidden;
box-shadow: inset 0 0 10px rgb(14, 20, 105),
0 0 5px rgb(9, 208, 235);
transition: all 0.5s;
}
position ： 相對(duì)定位。
letter-spacing：字間距。
linear-gradient：漸變顏色。
text-transform：全部字母為大寫(xiě)。
user-select：文本不可選中。
text-decoration：消除默認(rèn)下劃線。
overflow：溢出隱藏。
box-shadow：陰影。
transition：過(guò)渡效果。
3. 鼠標(biāo)經(jīng)過(guò)按鈕樣式變化：
.night:hover{
text-shadow: 0 0 5px rgb(18, 190, 243),
0 0 8px rgb(18, 190, 243),
0 0 10px rgb(18, 190, 243);
background-image: linear-gradient(90deg, rgb(25, 38, 99) 50%,rgb(13, 22, 58) 50% );
box-shadow: inset 0 0 10px rgb(14, 20, 105),
0 0 5px rgb(9, 208, 235),
0 0 10px rgb(9, 208, 235);
}
text-shadow：文字陰影。
lineear-gradient：漸變色變化。
box-shadow：盒子陰影變化。
4. 4條span的基本樣式：
.night span{
position: absolute;
}
absolute 絕對(duì)定位
5. 設(shè)置按鈕上方那條運(yùn)動(dòng)藍(lán)線樣式：
.night span:nth-child(1){
top: 0;
left: 0;
width: 100%;
height: 2px;
background-image: linear-gradient(to right, transparent , rgb(0, 153, 255) );
animation: move1 2s linear infinite;
}
@keyframes move1 {
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
linear-gradient：漸變色。
transparent為透明色。
animation：設(shè)置動(dòng)畫(huà)，讓藍(lán)線運(yùn)動(dòng)起來(lái)。
transform: translateX(-100%); 在X軸上的偏移為-100%。
transform: translateX(100%); 讓它偏移到100%。
6. 以此類(lèi)推，其它三條也設(shè)置動(dòng)畫(huà)，再讓左邊和右邊那條設(shè)置動(dòng)畫(huà)延遲便可。：
.night span:nth-child(2){
top: 0;
right: 0;
width: 2px;
height: 100%;
transform: translateY(-100%);
background-image: linear-gradient(to bottom, transparent , rgb(0, 153, 255) );
animation: move2 2s linear infinite;
animation-delay: 1s;
}
@keyframes move2 {
100%{
transform: translateY(100%);
}
}
.night span:nth-child(3){
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-image: linear-gradient(to left, transparent , rgb(0, 153, 255) );
animation: move3 2s linear infinite;
}
@keyframes move3 {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
.night span:nth-child(4){
top: 0;
left: 0;
width: 2px;
height: 100%;
transform: translateY(100%);
background-image: linear-gradient(to top, transparent , rgb(0, 153, 255) );
animation: move4 2s linear infinite;
animation-delay: 1s;
}
@keyframes move4 {
100%{
transform: translateY(-100%);
}
}
animation-delay: 1s; 設(shè)置動(dòng)畫(huà)延遲1秒播放。
完整代碼：
<!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>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(4, 4, 19);
}
.night{
position: relative;
width: 300px;
height: 100px;
color: rgb(18, 190, 243);
letter-spacing: 12px;
font-size: 50px;
line-height: 100px;
text-align: center;
/* background-color: rgb(31, 49, 133); */
background-image: linear-gradient(90deg, rgb(40, 62, 161) 50%,rgb(31, 49, 133) 50% );
text-transform: uppercase;
user-select: none;
text-decoration: none;
overflow: hidden;
box-shadow: inset 0 0 10px rgb(14, 20, 105),
0 0 5px rgb(9, 208, 235);
transition: all 0.5s;
}
.night:hover{
text-shadow: 0 0 5px rgb(18, 190, 243),
0 0 8px rgb(18, 190, 243),
0 0 10px rgb(18, 190, 243);
background-image: linear-gradient(90deg, rgb(25, 38, 99) 50%,rgb(13, 22, 58) 50% );
box-shadow: inset 0 0 10px rgb(14, 20, 105),
0 0 5px rgb(9, 208, 235),
0 0 10px rgb(9, 208, 235);
}
.night span{
position: absolute;
}
.night span:nth-child(1){
top: 0;
left: 0;
width: 100%;
height: 2px;
background-image: linear-gradient(to right, transparent , rgb(0, 153, 255) );
animation: move1 2s linear infinite;
}
@keyframes move1 {
0%{
transform: translateX(-100%);
}
100%{
transform: translateX(100%);
}
}
.night span:nth-child(2){
top: 0;
right: 0;
width: 2px;
height: 100%;
transform: translateY(-100%);
background-image: linear-gradient(to bottom, transparent , rgb(0, 153, 255) );
animation: move2 2s linear infinite;
animation-delay: 1s;
}
@keyframes move2 {
100%{
transform: translateY(100%);
}
}
.night span:nth-child(3){
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-image: linear-gradient(to left, transparent , rgb(0, 153, 255) );
animation: move3 2s linear infinite;
}
@keyframes move3 {
0%{
transform: translateX(100%);
}
100%{
transform: translateX(-100%);
}
}
.night span:nth-child(4){
top: 0;
left: 0;
width: 2px;
height: 100%;
transform: translateY(100%);
background-image: linear-gradient(to top, transparent , rgb(0, 153, 255) );
animation: move4 2s linear infinite;
animation-delay: 1s;
}
@keyframes move4 {
100%{
transform: translateY(-100%);
}
}
</style>
</head>
<body>
<a href="https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343" class="night" target="blank">
<span></span>
<span></span>
<span></span>
<span></span>
night
</a>
</body>
</html>
到此這篇關(guān)于使用CSS實(shí)現(xiàn)按鈕邊緣跑馬燈動(dòng)畫(huà)的文章就介紹到這了,更多相關(guān)CSS按鈕跑馬燈內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了使用css制作出血輪眼和輪回眼特效,本文只使用了css+html技術(shù)，非常容易上手學(xué)習(xí)，火影里的血輪眼和輪回眼特效炫酷十足，喜歡的朋友快來(lái)看看是怎么制作的2023-04-24
基于CSS制作創(chuàng)意端午節(jié)專(zhuān)屬加載特效
本文給大家分享的是一個(gè)css創(chuàng)意特效端午加載動(dòng)畫(huà)，想法是讓粽葉，糯米，紅棗繞圓旋轉(zhuǎn)，然后聚集起來(lái)融合后變成一個(gè)可愛(ài)的小粽子的效果，對(duì)css加載特效實(shí)現(xiàn)代碼感興趣的朋友2022-05-31
css實(shí)現(xiàn)文字?jǐn)嗔研Ч氖纠a
本文主要介紹了css實(shí)現(xiàn)文字?jǐn)嗔研Ч氖纠a，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-20
這篇文章主要介紹了300 多行css代碼搞定微信 8.0 的炸裂特效,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-02-05
這篇文章主要介紹了css實(shí)現(xiàn)透明漸變特效的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)2020-02-18
css實(shí)現(xiàn)發(fā)光文字及一點(diǎn)點(diǎn)js特效
這篇文章主要介紹了css實(shí)現(xiàn)發(fā)光文字及一點(diǎn)點(diǎn)js特效 ,需要的朋友可以參考下2019-04-23
CSS 圖片動(dòng)畫(huà)特效的示例代碼（相框）
這篇文章主要介紹了CSS 圖片動(dòng)畫(huà)特效的示例代碼（相框）的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-14- 這篇文章給大家介紹的是一個(gè)利用CSS實(shí)現(xiàn)的酷炫的下拉框，實(shí)現(xiàn)后效果真的非常不錯(cuò)，文中給出了詳細(xì)實(shí)現(xiàn)過(guò)程和示例代碼，感興趣的朋友們下面來(lái)一起看看吧。2016-10-20
- 半透明的邊框如何實(shí)現(xiàn)？多重邊框如何實(shí)現(xiàn)？這篇文章就是主要針對(duì)CSS邊框特效實(shí)現(xiàn)技巧進(jìn)行探究，感興趣的小伙伴們可以參考一下2016-04-26
- 這篇文章主要介紹了CSS實(shí)現(xiàn)段落首字母、首字放大特效,效果非常不錯(cuò)，需要的朋友可以參考下2014-12-31
