【鼠标滑入】一分钟用button带你玩转动画效果

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第18天，点击查看活动详情

前言

🤨 最近写了很多css的动画文章，转发到各种技术群之后，好多人就在问 鼠标滑入 的动画效果怎么去实现。

🤔 今天这篇文章就用 button 和 transition 带你入门一下 鼠标滑入 的动画效果。

纯色动画交互

😬 先来一对黑白双煞，用两种对比色实现同一种动画效果

虽说是黑白双煞,但是文章中只实现黑色部分,白色部分可以自己实现哦(文末有码上掘金的源码)

<div class="btn-holder">
  <button class="btn btn-1 hover-filled-slide-down">
    <span>蜡笔小心_</span>
  </button>
  <button class="btn btn-1 hover-filled-slide-up">
    <span>蜡笔小心_</span>
  </button>
  <button class="btn btn-1 hover-filled-slide-left">
    <span>蜡笔小心_</span>
  </button>
  <button class="btn btn-1 hover-filled-slide-right">
    <span>蜡笔小心_</span>
  </button>
  <button class="btn btn-1 hover-filled-opacity">
    <span>蜡笔小心_</span>
  </button>
</div>

• 新建 5 个 button
• 类名都一样，只是动画效果的样式做了不同的区分

/* 如下样式为按钮通用样式 */
::before,
::after {
  position: absolute;
  content: "";
}
.btn-holder {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1000px;
    margin: 10px auto 35px;
}
.btn {
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin: 0px 25px 15px;
    min-width: 150px;
}
.btn span {         
    position: relative;
    display: inline-block;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 20px;
    transition: 0.3s;
}

• 以上样式主要是用于设置按钮颜色和文字颜色
• 其中 span 标签中使用了 transition 用于交互文字颜色变换过程

.btn-1::before {
  background-color: rgb(28, 31, 30);
  transition: 0.3s ease-out;
}
.btn-1 span {
  color: rgb(255,255,255);
  border: 1px solid rgb(28, 31, 30);
  transition: 0.2s 0.1s;
}
.btn-1 span:hover {
  color: rgb(28, 31, 30);
  transition: 0.2s 0.1s;
}

• 先将 button 的默认样式画出来
• 背景设为黑色，文字设为白色
• 文字中有个滑入效果是将文字设为黑色

transition: 0.2s 0.1s 两个时间分别表示持续时间为0.2s，延迟时间为0.1s

0.2s 设置完成过渡效果所需秒数或毫秒

0.1s 设置过渡效果延时时长

• button 中同样设置了一个 transition 效果

transition: 0.3s ease-out 表示 0.3s 的时间执行 ease-out 减速动画

🥳 实现hover-filled-slide-down样式

• before 的通用样式在上面已经定义好了，这里就只需要写具体的定位即可

.btn.hover-filled-slide-down::before {
  bottom: 0;
  left: 0;
  right: 0; 
  height: 100%;
  width: 100%;
}
.btn.hover-filled-slide-down:hover::before {
  height: 0%;
}

• 当鼠标滑入时，黑色背景从高度 100% 变成 高度 0%，从而实现黑色变白色的背景效果

🧐 为了做更好的对比，直接把剩余几个的样式都写出来

/* 1.hover-filled-slide-down */

/* 2.hover-filled-slide-up */
.btn.hover-filled-slide-up::before {
  top: 0; left: 0; right: 0;
  height: 100%; width: 100%;
}
.btn.hover-filled-slide-up:hover::before {
  height: 0%;
}

/* 3.hover-filled-slide-left */
.btn.hover-filled-slide-left::before {
  top: 0; bottom: 0; left: 0;
  height: 100%; width: 100%;
}
.btn.hover-filled-slide-left:hover::before {
  width: 0%;
}

/* 4. hover-filled-slide-right */
.btn.hover-filled-slide-right::before {
  top:0; bottom: 0; right: 0;
  height: 100%; width: 100%;
}
.btn.hover-filled-slide-right:hover::before {
  width: 0%;
}

• 通过样式中的 top 、 left 、right 、bottom 可以得出如下规律

当从上至下执行动画时，就定义bottom：0

当从下至上执行动画时，就定义top：0

从左至右和从右至左亦是如此，分别定义right：0和left：0即可

😮 但是上下动画是改变高度，左右动画是改变宽度

🤐 还有一种透明色的动画交互没有写出来，大家可以自己试一下修改某个样式值实现出来（最后码上掘金中有全部源码）

线条动画交互

😬 再来一对黑白双煞，虽然都是线条动画交互，但是线条执行的过程和结束的节点都是可以 diy 的

虽说是黑白双煞,但是文章中只实现黑色部分,白色部分可以自己实现哦(文末有码上掘金的源码)

<div class='btn-holder'>
  <button class="btn btn-3 hover-border-1">
    <span>蜡笔小心_</span>
  </button>
  <button class="btn btn-3 hover-border-2">
    <span>蜡笔小心_</span>
  </button>
  <button class="btn btn-3 hover-border-3">
    <span>蜡笔小心_</span>
  </button>
  <button class="btn btn-3 hover-border-4">
    <span>蜡笔小心_</span>
  </button>
  <button class="btn btn-3 hover-border-5">
    <span>蜡笔小心_</span>
  </button>
</div>

• 因为这个是使用 边框线 去实现动画效果的,所以通用样式有些许不同

.btn-3 {
  padding: 5px;
}
.btn-3 span {
  color: rgb(255, 255, 255);
  background-color: rgb(54, 56, 55);
}
.btn-3::before,
.btn-3::after {
  background: transparent;
  z-index: 2;
}

backgroundcolor为transparent的元素的事件会对被它遮住的元素所截获。

🥳 实现hover-border-1样式

.btn.hover-border-1::before,
.btn.hover-border-1::after {
  width: 10%; height: 25%;
  transition: 0.35s;
}
.btn.hover-border-1::before {
  top: 0; left: 0;
  border-left: 1px solid rgb(28, 31, 30);
  border-top: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-1::after {
  bottom: 0; right: 0;
  border-right: 1px solid rgb(28, 31, 30);
  border-bottom: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-1:hover::before,
.btn.hover-border-1:hover::after {
  width: 99%;
  height: 99%;
}

• 通过 before 和 after 两个伪类实现了按钮两侧的边框线
• 默认给定 10% 的宽 和 25% 的高，这样就可以在按钮两个角看到部分边框线
• 鼠标滑入的时候，将宽高设定为 99%

😑 这里设置成 100% 的话，会在边框夹角处出现多余的交点

/* 1. hover-border-1 */


/* 2. hover-border-2 */
.btn.hover-border-2::before,
.btn.hover-border-2::after {
  width: 10%; height: 25%;
  transition: 0.35s;
}
.btn.hover-border-2::before {
  bottom: 0; left: 0;
  border-left: 1px solid rgb(28, 31, 30);
  border-bottom: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-2::after {
  top: 0; right: 0;
  border-right: 1px solid rgb(28, 31, 30);
  border-top: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-2:hover::before,
.btn.hover-border-2:hover::after {
  width: 99%;
  height: 99%;
}

• 1 和 2 的样式差异同样是在定位时的 top、 bottom 顺序差值

🥳 实现hover-border-3样式

.btn.hover-border-3::before,
.btn.hover-border-3::after {
  width: 0%; height: 0%;
  opacity: 0;
  transition: width 0.2s 0.15s linear, height 0.15s linear, opacity 0s 0.35s;
}
.btn.hover-border-3::before {
  top: 0; right: 0;
  border-top: 1px solid rgb(28, 31, 30);
  border-left: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-3::after {
  bottom: 0; left: 0;
  border-bottom: 1px solid rgb(28, 31, 30);
  border-right: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-3:hover::before,
.btn.hover-border-3:hover::after {
  width: 100%; height: 99%;
  opacity: 1;
  transition: width 0.2s linear, height 0.15s 0.2s linear, opacity 0s;   
}

• 这里直接将边框线的宽高设置为0了

transition 设置宽 和 高 进行线性运动，然后实现边框线的显示和隐藏动画效果

/* 4. hover-border-4 */
.btn.hover-border-4::before,
.btn.hover-border-4::after {
  width: 0%; height: 0%;
  opacity: 0;
  transition: width 0.2s linear, height 0.15s 0.2s ease-out, opacity 0s 0.35s;
}
.btn.hover-border-4::before {
  bottom: 0; left: -1px;
  border-top: 1px solid rgb(28, 31, 30);
  border-left: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-4::after {
  top: 0; right: 0;
  border-bottom: 1px solid rgb(28, 31, 30);
  border-right: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-4:hover::before,
.btn.hover-border-4:hover::after {
  width: 100%; height: 99%;
  opacity: 1;
  transition: width 0.2s 0.15s ease-out, height 0.15s ease-in, opacity 0s;   
}

/* 5. hover-border-5 */
.btn.hover-border-5::before,
.btn.hover-border-5::after {
  width: 0%; height: 0%;
  opacity: 0;
}
.btn.hover-border-5::before {
  top: 0; right: 0;
  border-top: 1px solid rgb(28, 31, 30);
  border-left: 1px solid rgb(28, 31, 30);
  transition: width 0.2s 0.5s ease-out, height 0.15s 0.35s linear, opacity 0s 0.7s;
}
.btn.hover-border-5::after {
  bottom: 0; left: 0px;
  border-bottom: 1px solid rgb(28, 31, 30);
  border-right: 1px solid rgb(28, 31, 30);
  transition: width 0.2s 0.15s linear, height 0.15s ease-in, opacity 0s 0.35s;
}
.btn.hover-border-5:hover::before,
.btn.hover-border-5:hover::after {
  width: 100%; height: 96%;
  opacity: 1;
}
.btn.hover-border-5:hover::before {
  transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s;
}
.btn.hover-border-5:hover::after {
  transition: width 0.2s 0.35s linear, height 0.15s 0.5s ease-out, opacity 0s 0.3s; 
} 

• 4 和 5 的样式也和 3 差不多，都是针对 top、bottom 进行差异化显示的

码上掘金看效果