其他
【每日一练】13—CSS 产品卡片动画效果的实现
写在前面
在前面，我跟大家分享了一些关于产品卡片的小项目，如果你还没有开始练起来的话，可以从今天开始练习起来，通过时间的加持，让自己慢慢跨越那个什么都不懂的阶段。
今天这个小项目依然是一个产品卡片的效果，具体效果如下：
<!DOCTYPE html><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;}写在最后
以上就是今天与你分享的【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号