其他
【每日一练】51—CSS实现可折叠卡片悬停动画效果
写在前面
到今天，我们【每日一练】栏目100个小项目练习的目标，正式过半，今天我们正式开启后面50个小项目的练习，希望通过这些练习，让你慢慢体会坚持学习带来的收获，不管是技能的提升还是学习习惯的养成，我觉得，这都是一种收获。
当初，我也是这样慢慢坚持学下来的。希望你也能慢慢坚持去做一件自己认为对的事情，当然，这件事情，不一定是学习编程，可以是任何事情，只要是你认为值得投入时间与精力的事情即可，因为每个人对自己认为对的事情的标准不一样，这个是主观性的，没有标准答案。
因此，在很多时候，我也跟周围的人讲，不要自己画地为牢，人生也有很多可能性，就看你愿不愿尝试而已。
接下来，我们一起来看一下今天这个效果，今天练习的这个小项目，其实，在前面的练习中以及视频号上都有分享过类似的效果，视频号上的效果具体如下：
<!DOCTYPE html><html><head> <title>【每日一练】51—CSS实现可折叠卡片悬停动画效果</title> <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css"></head><body> <div class="card"> <div class="imgBox"> <img src="img1.jpg"> <img src="img2.jpg"> </div> <div class="details"> <div class="content"> <h2>张三<br><span>web前端开发</h2> <div class="social-icons"> <a href="http://www.webqdkf.com" target="_blank"><i class="fa fa-qq " aria-hidden="true"></i></a> <a href="http://www.webqdkf.com" target="_blank"><i class=" fa fa-wechat" aria-hidden="true"></i></a> <a href="http://www.webqdkf.com" target="_blank"><i class="fa fa-weibo" aria-hidden="true"></i></a> <a href="http://www.webqdkf.com" target="_blank"><i class="fa fa-renren" aria-hidden="true"></i></a> </div> </div> </div> </div></body></html>*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif;}body{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; min-height: 100vh; background: #232323;}.card{ position: relative; width: 300px; height: 400px; margin: 20px 20px; background: #fff; transform-style: preserve-3d; transform: perspective(1000px); box-shadow: 10px 20px 40px rgba(0,0,0,0.25); transition: 1s;}.card:hover{ transform: translateX(50%); }.card .imgBox{ width: 100%; height: 100%; position: relative; transform-origin: left; z-index: 1; transform-style: preserve-3d; background: #000; transition: 1s;}.card:hover .imgBox{ transform: rotateY(-180deg); box-shadow: 10px 20px 40px rgba(0,0,0,0.25);}.card .imgBox img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transform-style: preserve-3d; backface-visibility: hidden;}.card .imgBox img:nth-child(2){ transform: rotateY(180deg);}.card .details{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; padding: 20px; display: flex; justify-content: center; align-items: center;}.card .details .content{ display: flex; justify-content: center; align-items: center; flex-direction: column;}.card .details h2{ text-align: center; font-weight: 700; line-height: 1em;}.card .details h2 span{ color: #00a6bc; font-size: 0.8em;}.card .details .social-icons{ position: relative; display: flex; margin-top: 10px;}.card .details .social-icons a{ display: inline-block; width: 35px; height: 35px; display: flex; margin: 5px; font-size: 18px; justify-content: center; align-items: center; text-decoration: none; background: #333; color: #fff; transition: 0.2s;}.card .details .social-icons a:hover{ background: #00a6bc;}写在最后
以上就是我们今天【每日一练】小项目的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号