TEST-用css实现矩形扩散动画效果制作一个简约科技按钮
测试目的：用css实现矩形扩散动画效果简单实现一个简约科技按钮
前几天在网上找漂亮的功能组件时看见有人用css实现圆形的具有波纹扩散动画效果的按钮，效果挺好看的，但是作为设计作者觉得矩形的过渡棱角科技感更饱满一些，所以作者借助这种思路用css简单的实现了一个矩形扩散的按钮运用在自己的项目中，顺便拿出来分享一下思路。
解决对象是按下的前后的一个动画的变化效果
当按钮按下时光环会从贴近按钮的边缘向外扩散，然后消失，给人一种科技波纹的效果
这里附上代码
.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;
}
}
测试效果：https://codepen.io/tt1500891331/pen/dyRgBGy
目前这个按钮功能已经实现，但是还存在一个问题是当页面加载或是重新刷新的时候，动画会走一遍，如果有大佬阅读本文章请帮忙在留言下回复一下，有没有在不使用js的前提下靠css的本身能够让他在加载或刷新过程中跳过动画过渡呢
