【每日一练】147—实现一个滑动按钮动画组件效果

最新推荐文章于 2024-04-26 16:58:59 发布

web前端开发V

最新推荐文章于 2024-04-26 16:58:59 发布

阅读量4k

点赞数

文章标签： css css3 html 前端 javascript

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649136242&idx=2&sn=d6d7aaac03dfff5bb3e11d6d658938d1&chksm=be58bbdf892f32c9ee2e32f3d2d2f6cd6ccaa41ab42e3942820f4c1bd55a2f4e8985b5a4733b&scene=126&sessionid=0

版权

作者 | 杨小爱

写在前面

今天这个练习，是一个动画按钮小组件的实现，最终效果如下：

当然，代码也很简单，具体实现过程如下：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>dongh</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <a href="http://www.webqdkf.com" class="btn">鼠标来点一下<span><ion-icon name="arrow-forward-outline"></ion-icon></span></a>
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>

CSS代码：

*
{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
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.5);
  text-decoration: none;
  letter-spacing: 2px;
  border-top: 0.5px solid rgba(255,255,255,0.35);
  border-left: 0.5px solid rgba(255,255,255,0.35);
  padding-left: 40px;
  transition: 0.5s;
  overflow: hidden;
}
.btn:hover 
{
  padding-left: 0px;
  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;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1a191d;
  font-size: 1.5em;
}
.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.25);
  transform: translateX(-170px) skewX(30deg);
  transition: 0.75s ease-in-out;
}
.btn:hover:after 
{
  transform: translateX(170px) skewX(30deg);
}

写在最后

以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。

我是杨小爱，我们明天见。

推荐阅读

【每日一练】01~100练大合集汇总

以上是我们的视频号，如果你还没有关注我们的视频号的话，欢迎关注我们的视频号。

学习更多技能

请点击下方公众号

web前端开发V

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【每日一练】147—实现一个滑动按钮动画组件效果

作者 | 杨小爱写在前面今天这个练习，是一个动画按钮小组件的实现，最终效果如下：当然，代码也很简单，具体实现过程如下：HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>dongh</title> <link...
复制链接

扫一扫