用 CSS 来制作按钮动画
  Skill  263℃  5条  192字数  预计阅读时间1分钟

用 CSS 来制作按钮动画

  Skill  263℃  5条  192字数  预计阅读时间1分钟

有时候我们想给按钮加个简单的动画互动效果,来增强用户体验,虽然这样的效果可能有现成的 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>

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

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

(๑´ㅂ`๑) 已有5人微信打赏,心情+5...

用 CSS 来制作按钮动画

btn.gif

有时候我们想给按钮加个简单的动画互动效果,来增强用户体验,虽然这样的效果可能有现成的 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>

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

发表你的评论
选择表情
  1. 晴和君
    A罩

    评论框在mac下chrome有错位哦。下面的textarea看不到了。我改了css才写了这条评论 aru_3.png

    Chrome 浙江省宁波市 移动
    1. Jdeal
      主人
      @晴和君

      我CSS调整了下,麻烦亲有空的时候重新看下还有无问题哈,谢谢,可能需要刷新下缓存~

      Chrome 江苏省无锡市 移动
      1. 晴和君
        A罩
        @Jdeal

        没问题了

        Chrome 美国 加利福尼亚州洛杉矶IT7网络
        1. Jdeal
          主人
          @晴和君

          感谢感谢,新年快乐~

          Chrome 江苏省无锡市 移动
    2. Jdeal
      主人
      @晴和君

      额,我在我的Mac下的Chrome没看到错位额,方便截张图我看看么?

      Chrome 江苏省无锡市 移动