七夏 发表于 2024-10-17 21:06:02

滑动按钮悬停效果

# 滑动按钮悬停效果

> 本节主要使用HTML+CSS实现一个鼠标悬停的动画效果。

## 演示效果

![图片](https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_gif/3tk5sUAlYXoX4JrobWKpbRgWdWxcLVufRlKY6ylicjhAuBaZDojjvem41sJAoqtiaxRC64AOwa3g8pnnruTQgKXQ/640?wx_fmt=gif&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1 "null")

## HTML

```
<!doctype html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>滑动按钮悬停效果</title>
  <link rel='stylesheet' href='style.css'>
  <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>

<a href='#' class='btn'>
  <span><i class='bx bx-right-arrow-alt'></i></span>
  前往下一步
</a>

</body>
</html>
```

## CSS

```
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #28272a;
}
.btn {
  position: relative;
  width: 200px;
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: rgba(255, 255, 255, 0.25);
  text-decoration: none;
  letter-spacing: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.35);
  padding-left: 40px;
  transition: 0.5s;
  overflow: hidden;
}
.btn:hover {
  padding-left: 0;
  padding-right: 40px;
  color: rgba(255, 255, 255, 1);
}
.btn span {
  position: absolute;
  left: 5px;
  width: 50px;
  height: 50px;
  background: #04fe4d;
  border-radius: 50%;
  transition: 0.5s ease-in-out;
  color: #000;
  font-size: 2.5em;
  text-align: center;
}
.btn:hover span {
  left: calc(100% - 55px)
}
.btn:after{
  content: '';
  position: absolute;
  width: 80px;
  height: 100%;
  z-index:1;
  background: rgba(255, 255, 255, 0.5);
  transform: translateX(-170px) skewX(30deg);
  transition: 0.75s ease-in-out;
}
.btn:hover:after{
  transform: translateX(170px) skewX(30deg);
}
```

## 代码解析

```
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
```

在页面中引入字体图标样式库。

```
.btn span {
  position: absolute;
  left: 5px;
  width: 50px;
  height: 50px;
  background: #04fe4d;
  border-radius: 50%;
  transition: 0.5s ease-in-out;
  color: #000;
  font-size: 2.5em;
  text-align: center;
}
.btn:hover span {
  left: calc(100% - 55px)
}
```

通过 `hover`改变按钮Icon的位置，实现运动效果。

```
.btn:after{
  content: '';
  position: absolute;
  width: 80px;
  height: 100%;
  z-index:1;
  background: rgba(255, 255, 255, 0.5);
  transform: translateX(-170px) skewX(30deg);
  transition: 0.75s ease-in-out;
}
.btn:hover:after{
  transform: translateX(170px) skewX(30deg);
}
```

利用伪类(`after`)和变换(`transform`)给按钮添加高光效果，鼠标移入设置偏移量，实现动画效果。
页: [1]
查看完整版本: 滑动按钮悬停效果