測試目的：用css實(shí)現(xiàn)矩形擴(kuò)散動(dòng)畫效果簡單實(shí)現(xiàn)一個(gè)簡約科技按鈕
前幾天在網(wǎng)上找漂亮的功能組件時(shí)看見有人用css實(shí)現(xiàn)圓形的具有波紋擴(kuò)散動(dòng)畫效果的按鈕未状，效果挺好看的蹂随，但是作為設(shè)計(jì)作者覺得矩形的過渡棱角科技感更飽滿一些蛉鹿，所以作者借助這種思路用css簡單的實(shí)現(xiàn)了一個(gè)矩形擴(kuò)散的按鈕運(yùn)用在自己的項(xiàng)目中，順便拿出來分享一下思路况木。
解決對象是<button>按下的前后的一個(gè)動(dòng)畫的變化效果
當(dāng)按鈕按下時(shí)光環(huán)會從貼近按鈕的邊緣向外擴(kuò)散乃坤，然后消失，給人一種科技波紋的效果
這里附上代碼
````
````
```
.button {
width: 50px;
? height: 50px;
? display: inline-block;
? background: linear-gradient(45deg,#00eaff,#006aff) ;
? color: #fff;
? border-radius: 5px;
? border: none;
? cursor: pointer;
? position: relative;
? box-shadow: 0 2px 25px rgba(0, 234, 250, 0.5);
? outline: 0;
}
.button:active {
? transform: scale(0.95);
? box-shadow: 0 2px 25px rgba(0, 234, 255, 0.5);
}
.button::before{
? width: 45px;
? height: 45px;
border-radius: 5px;
border: 2px solid rgba(0, 234, 250, 0.5);
? position:absolute;
z-index: -1;
? content: '';
? left: 0px;
? right: 0px;
? top: 0px;
? bottom: 0px;
? animation: bubble? 0.75s ;
-webkit-animation: bubble? 0.75s ;
}
.button:active::before {
? animation: none;
}
@keyframes bubble {
? 100% {
? transform: scale(1.5) ;
opacity: 0;?
? }
}
```
````
````
測試效果：Attention Required! | Cloudflare
目前這個(gè)按鈕功能已經(jīng)實(shí)現(xiàn)弄贿，但是還存在一個(gè)問題是當(dāng)頁面加載或是重新刷新的時(shí)候春锋，動(dòng)畫會走一遍，如果有大佬閱讀本文章請幫忙在留言下回復(fù)一下差凹，有沒有在不使用js的前提下靠css的本身能夠讓他在加載或刷新過程中跳過動(dòng)畫過渡呢
