【每日一练】23—CSS实现图像悬停动画的效果

最新推荐文章于 2022-11-12 09:52:30 发布

web前端开发V

最新推荐文章于 2022-11-12 09:52:30 发布

阅读量217

点赞数

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649129377&idx=4&sn=14b6a397293b7d2407f5acd661c007ef&chksm=be58a60c892f2f1a05812e37dfdaa7701c71c7bf720f27a5487adb668768ae7445949bdb0226&scene=126&&sessionid=0

版权

今天练习的这个案例，是前几天我在视频号上分享过的，但是没有分享源码，于是有小伙伴在后台留言说，想要看一下源码，今天就给需要的小伙伴安排上，这个效果具体看下面视频，源码我就不直接打包，但是我直接贴在文章中了，方便浏览，节省下载时间。

具体的效果，请看下面的视频：

另外，今天练习项目中的图片素材，我也上传到百度网盘了，需要的小伙伴可以自行获取，当然，你可以直接用其他的图片素材代替，这个都不是什么大问题。

需要图片素材的小伙伴可以自行获取，地址如下: https://pan.baidu.com/s/10Ag4qT6UwnIwjIVfo-1zVg?pwd=e38y

提取码: e38y

最后，我们再来看一下实现的代码。

HTML代码：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【每日一练】23—CSS实现图像悬停动画的效果</title>
</head>
<body>
  <div class="container">
    <div class="card">
      <div class="imgBx">
        <img src="img1.jpg">
      </div>
      <div class="contentBx">
        <div class="content">
          <h3>Post One</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="imgBx">
        <img src="img2.jpg">
      </div>
      <div class="contentBx">
        <div class="content">
          <h3>Post Two</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="imgBx">
        <img src="img3.jpg">
      </div>
      <div class="contentBx">
        <div class="content">
          <h3>Post Three</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="imgBx">
        <img src="img4.jpg">
      </div>
      <div class="contentBx">
        <div class="content">
          <h3>Post Four</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="imgBx">
        <img src="img5.jpg">
      </div>
      <div class="contentBx">
        <div class="content">
          <h3>Post Five</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="imgBx">
        <img src="img6.jpg">
      </div>
      <div class="contentBx">
        <div class="content">
          <h3>Post Six</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

CSS代码：

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
*
{
  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: #222;
}
.container
{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1100px;
}
.container .card
{
  position: relative;
  width: 320px;
  height: 320px;
  margin: 15px;
  overflow: hidden;
}
.container .card .imgBx,
.container .card .contentBx
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.container .card .imgBx img
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.container .card .contentBx::before
{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transition: transform 0.5s ease-in-out;
  transform-origin: right;
  transition-delay: 0.5s;
}
.container .card:hover .contentBx::before
{
  transform: scaleX(1);
  transition: transform 0.5s ease-in-out;
  transform-origin: left;
  transition-delay: 0s;
}
.container .card .contentBx
{
  display: flex;
  justify-content: center;
  align-items: center;
}
.container .card .contentBx .content
{
  position: relative;
  padding: 30px;
  z-index: 1;
  transition: 0.5s;
  transform: translateX(-300px);
  transition-delay: 0s;
}
.container .card:hover .contentBx .content
{
  transform: translateX(0px);
  transition-delay: 0.5s;
}
.container .card .contentBx .content h3
{
  font-size: 1.3em;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.container .card .contentBx .content p
{
  font-size: 1em;
  line-height: 1.4em;
  font-weight: 300;
}

写在最后

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

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

学习更多技能

请点击下方公众号