写在前面
在前面，我跟大家分享了一些关于产品卡片的小项目，如果你还没有开始练起来的话，可以从今天开始练习起来，通过时间的加持，让自己慢慢跨越那个什么都不懂的阶段。
今天这个小项目依然是一个产品卡片的效果，具体效果如下：
<html><head><title>【每日一练】13—CSS产品卡片动画效果的实现</title></head><body><div class="card"><div class="cover"><img src="watch1.png"></div><div class="details"><div><img src="watch2.png"><h3>苹果电话手表</h3><h2>¥ 1999</h2><a href="https://www.webqdkf.com/" target="_blank">添加购物车</a></div></div></div></body></html>
*{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: #09383e;}.card{position: relative;margin: 20px 0;width: 300px;height: 400px;background: #fff;transform-style: preserve-3d;transform: perspective(2000px);box-shadow: inset 300px 0 50px rgba(0,0,0,.15),0 20px 20px rgba(0,0,0,.15);transition: 1s;}.card:hover{transform: perspective(2000px) translateX(50%);box-shadow: inset 20px 0 50px rgba(0,0,0,.15), 0 10px 100px rgba(0,0,0,.15);}.card .cover{position: relative;width: 100%;height: 100%;transform-origin: left;z-index: 2;transition: 1s ease-out;background: #fff;display: flex;justify-content: center;align-items: center;transform-style: preserve-3d;overflow: hidden;}.card .cover img{max-width: 100%;z-index: 1;}.card:hover .cover{transform: rotateY(-180deg);}.card .cover::before{content: '';position: absolute;width: 10px;background: #fff;height: 150%;transform: rotate(36.5deg);box-shadow: 0 0 0 20px #47bfce;transition: 0.5s;transition-delay: 1s;}.card:hover .cover::before{width: 0px;box-shadow: 0 0 0 250px #47bfce;transform: rotate(143.5deg);}.card .details{position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 20px;display: flex;justify-content: center;align-items: center;text-align: center;overflow: hidden;}.card .details h3{font-weight: 500;margin: 5px 0;}.card .details h2{font-size: 1.5em;color: #e82a5b;font-weight: 600;}.card .details a{display: inline-block;padding: 8px 20px;margin-top: 5px;background: #47bfce;color: #fff;font-weight: 500;letter-spacing: 1px;border-radius: 25px;text-decoration: none;}
写在最后
以上就是今天与你分享的【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号
