【每日一练】24—CSS实现产品卡片的动画效果
web前端开发
共 3896字，需浏览 8分钟
·
2022-07-13 13:21
今天继续练习我们视频号上的一个项目，具体效果可以看下面的视频内容：
因为这个项目里，我们只用到了一张图片，我就直接把图片放在文章中了，需要这个图片素材的小伙伴，可以直接鼠标点击图片，另存为就好了，当然，你也可以用其他的图片素材来代替，这个问题都不大。
<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>
@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;}
写在最后
关于这个产品卡片的动画效果，前面也分享了不少了，希望能够给你一些代码实现设计思路。
今天的【每日一练】内容就先到这里了，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
推荐内容
学习更多技能
请点击下方公众号
评论