【每日一练】24—CSS实现产品卡片的动画效果

最新推荐文章于 2023-06-06 14:50:33 发布

web前端开发V

最新推荐文章于 2023-06-06 14:50:33 发布

阅读量350

点赞数

文章标签： css css3 html js javascript

原文链接：https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649129441&idx=3&sn=71c16dd8cf7b938ad713cbb3931c27d3&chksm=be58a64c892f2f5ac7501834899be05ee0e303ca1eb9b4614f23181f3c3907260fc9c2f05595&scene=126&&sessionid=0

版权

今天继续练习我们视频号上的一个项目，具体效果可以看下面的视频内容：

因为这个项目里，我们只用到了一张图片，我就直接把图片放在文章中了，需要这个图片素材的小伙伴，可以直接鼠标点击图片，另存为就好了，当然，你也可以用其他的图片素材来代替，这个问题都不大。

接着，我们再来看一下HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>【每日一练】24—CSS实现产品卡片的动画效果</title>
</head>
<body>
  <div class="card">
    <div class="imgBx">
      <img src="shoe.jpg">
    </div>
    <div class="details">
      <h3>Nike Air Max<br><span>Men's Shoe</span></h3>
      <h4>Product Details</h4>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla ducimus iusto.</p>
      <h4>Size</h4>
      <ul class="size">
        <li>36</li>
        <li>38</li>
        <li>40</li>
        <li>42</li>
        <li>44</li>
      </ul>
      <div class="group">
        <h2><sup>$</sup>199<small>.99</small></h2>
        <a href="#">Buy Now</a>
      </div>
    </div>
  </div>
</body>
</html>

CSS代码：

@import url('https://fonts.googleapis.com/css?family=Poppins:200,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;
  background: linear-gradient(#4ba9e9 0,#4ba9e9 50%,#fff 50%,#fff 100%);
  min-height: 100vh;
}
.card 
{
  position: relative;
  width: 300px;
  height: 380px;
  background: #0000;
  display: flex;
  box-shadow: 0 15px 45px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: 0.5s ease-in-out;
}
.card:hover 
{
  width: 600px;
}
.card .imgBx 
{
  position: relative;
  min-width: 300px;
  height: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}
.card .imgBx  img 
{
  max-width: 250px;
  transition: 0.5s ease-in-out;
}
.card:hover .imgBx  img 
{
  transform: rotate(-35deg) translateX(-20px);
}
.card .details 
{
  position: absolute;
  left: 0;
  width: 300px;
  height: 100%;
  background: #4ba9e9;
  display: flex;
  justify-content: center;
  padding: 20px;
  flex-direction: column;
  transition: 0.5s ease-in-out;
}
.card:hover .details 
{
  left: 300px;
}
.card .details::before 
{
  content: '';
  position: absolute;
  left: 0px;
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #fff;
  z-index: 1;
}
.card .details h3 
{
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 1.5em;
  line-height: 1em;
}
.card .details h3 span 
{
  font-size: 0.65em;
  font-weight: 300;
  opacity: 0.85;
  text-transform: none;
}
.card .details h4 
{
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.9em;
  line-height: 1em;
  margin-top: 20px;
  margin-bottom: 10px;
}
p 
{
  color: #fff;
  font-size: 0.8em;
  opacity: 0.85;
}
.size 
{
  display: flex;
  gap: 10px;
}
.size li 
{
  list-style: none;
  color: #fff;
  font-size: 0.9em;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #fff;
  cursor: pointer;
  font-weight: 500;
  opacity: 0.5;
}
.size li:hover 
{
  background: #fff;
  color: #4ba9e9;
  opacity: 1;
}
.group 
{
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  align-items: center;
}
.card .details h2 
{
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 2em;
}
.card .details h2 sup 
{
  font-weight: 300;
}
.card .details h2 small 
{
  font-size: 0.75em;
}
.card .details a 
{
  display: inline-flex;
  padding: 10px 25px;
  background: #fff;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  color: #4ba9e9;
}

写在最后

关于这个产品卡片的动画效果，前面也分享了不少了，希望能够给你一些代码实现设计思路。

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

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

推荐内容

学习更多技能

请点击下方公众号

web前端开发V

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【每日一练】24—CSS实现产品卡片的动画效果

今天继续练习我们视频号上的一个项目，具体效果可以看下面的视频内容：因为这个项目里，我们只用到了一张图片，我就直接把图片放在文章中了，需要这个图片素材的小伙伴，可以直接鼠标点击图片，另存为就好了，当然，你也可以用其他的图片素材来代替，这个问题都不大。接着，我们再来看一下HTML代码：<!DOCTYPE html><html><head&gt...
复制链接

扫一扫