【每日一练】137—CSS实现一个鼠标悬停动画效果

最新推荐文章于 2024-07-21 17:00:00 发布

web前端开发V

最新推荐文章于 2024-07-21 17:00:00 发布

阅读量602

点赞数

文章标签： css 前端 html css3 javascript

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649135648&idx=3&sn=2536bf8cdb798ead95d230aa76d4ce40&chksm=be58bd8d892f349b48bc736db03a1a07d148d8e52f27fd40287c7645869063b7f8556de74f3c&scene=126&sessionid=0

版权

文章展示了如何使用纯CSS创建一个鼠标悬停时的动画效果，包括不同盒子在鼠标悬停时的平移变换，以及图标和文本颜色的变化，适用于前端开发和网页设计中的交互元素增强。

摘要由CSDN通过智能技术生成

在web项目开发中，鼠标效果也是非常值得精心设计，因此，今天我们来练习一个纯CSS实现的鼠标动画效果，具体效果如下：

看完了最终效果，我们在来看一下它的实现代码，具体代码如下：

HTML代码：

<!doctype html>
<html>
<head>
  <title>【每日一练】137—CSS实现一个鼠标悬停动画效果</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <div class="box" style="--clr:#fc5f9b;">
      <div class="content">
        <div class="icon"><ion-icon name="color-palette-outline"></ion-icon></div>
        <div class="text">
          <h3>web前端开发</h3>
          <p>5个项目</p>
        </div>
      </div>
    </div>
    <div class="box" style="--clr:#a362ea;">
      <div class="content">
        <div class="icon"><ion-icon name="code-slash-outline"></ion-icon></div>
        <div class="text">
          <h3>网页设计</h3>
          <p>10个项目</p>
        </div>
      </div>
    </div>
    <div class="box" style="--clr:#0ed095;">
      <div class="content">
        <div class="icon"><ion-icon name="earth-outline"></ion-icon></div>
        <div class="text">
          <h3>UI设计</h3>
          <p>12个项目</p>
        </div>
      </div>
    </div>
  </div>
  <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: #f7f7f7;
}
.container
{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.container .box 
{
  position: relative;
  background: #fff;
  width: 400px;
  height: 100px;
  cursor: pointer;
  transition: 0.5s ease-in-out;
  box-shadow: 10px 10px 15px rgba(0,0,0,0.025);
}
.container:hover .box:nth-child(1)
{
  transform: translateX(-70px);
}
.container:hover .box:nth-child(3)
{
  transform: translateX(70px);
}
.container .box::before 
{
  content: '';
  position: absolute;
  width: 6px;
  height: 100%;
  background: var(--clr);
  transition: 0.5s ease-in-out;
}
.container .box:hover::before 
{
  width: 100%;
}  
.container .box .content 
{
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}
.container .box .content .icon 
{
  position: relative;
  min-width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .box .content .icon ion-icon 
{
  font-size: 2.5em;
  color: var(--clr);
  transition: 0.5s ease-in-out;
}


.container .box:hover .content .icon ion-icon  
{
  color: #fff;
}
.container .box .content .text h3
{
  font-weight: 500;
  color: var(--clr);
  transition: 0.5s ease-in-out;
}
.container .box .content .text p
{
  font-size: 0.9em;
  color: #999;
  transition: 0.5s ease-in-out;
}
.container .box:hover .content .text h3,
.container .box:hover .content .text p 
{
  color: #fff;
}

写在最后

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

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

推荐阅读

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

学习更多技能

请点击下方公众号

web前端开发V

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【每日一练】137—CSS实现一个鼠标悬停动画效果

在web项目开发中，鼠标效果也是非常值得精心设计，因此，今天我们来练习一个纯CSS实现的鼠标动画效果，具体效果如下：看完了最终效果，我们在来看一下它的实现代码，具体代码如下：HTML代码：<!doctype html><html><head> <title>【每日一练】137—CSS实现一个鼠标悬停动画效果</title> &...
复制链接

扫一扫