用 CSS 来制作按钮动画
in Skill with 457 Views

用 CSS 来制作按钮动画

in Skill with 458 Views

有时候我们想给按钮加个简单的动画互动效果,来增强用户体验,虽然这样的效果可能有现成的 js 库,但是 js 库很多时候还要注意加载问题,其实 css 也可以很简单的实现这样的动画效果。

css 中与鼠标交互的伪类主要有:hover 鼠标经过;:active 鼠标按下;:focus 鼠标聚焦;:checked 鼠标选中...下面直接上源码。

.btn{ 
display: block; 
width: 100px; 
outline: 0; 
overflow: hidden;  
position: relative; 
transition: .3s; 
cursor: pointer; 
user-select: none; 
height: 40px; 
text-align: center; 
line-height: 40px; 
font-size: 16px; 
background: tomato; 
color: #fff;  
border-radius: 6px;
}

.btn>span:after{
content: ''; 
position: absolute; 
background: transparent; 
border-radius:50%; 
width: 100%; 
padding-top: 100%; 
left: 50%; 
top: 50%; 
transform: translate(-50%,-50%) scale(1);
}

.btn:active{ 
background: orangered;
}

.btn>input[type=checkbox]{
display: none
}

.btn>input[type=checkbox]+span:after{
animation: ripple-in 1s;
}

.btn>input[type=checkbox]:checked+span:after{
animation: ripple-out 1s;
}

@keyframes ripple-in{
    from {
        transform: translate(-50%,-50%) scale(0);
        background: rgba(0,0,0,.25);
    }
    to {
        transform: translate(-50%,-50%) scale(1);
        background: transparent;
    }
}

@keyframes ripple-out{
     from {
         transform: translate(-50%,-50%) scale(0);
         background: rgba(0,0,0,.25);
     }
     to {
         transform: translate(-50%,-50%) scale(1);
         background: transparent;
     }
}

同时我们只要如下在 body 中加上按钮就可以啦。

<label class="btn">
  <input type="checkbox"><span>btn</span>
</label>

以上就是该效果的所有源码,但是由于该动画在默认情况下会被触发。所以当页面加载后就会看到按钮上动画会出现一次,不过也不是特别明显,还可以接受。

如果本文对您有用的话,欢迎在下方留言评论哦~
发表评论
选择表情