滑动按钮悬停效果

七夏（UID：1） · 发表于 2024-10-17 21:06:02

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

滑动按钮悬停效果

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

演示效果

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)给按钮添加高光效果，鼠标移入设置偏移量，实现动画效果。

滑动按钮悬停效果

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

滑动按钮悬停效果

演示效果

HTML

CSS

代码解析

快速回帖

分享帝

龙年限定

关于楼主

商务推广