其他
【每日一练】90—CSS实现图片悬停叠加动画效果
写在前面
今天练习这个效果，是之前在视频号上跟大家分享过的，具体效果可以看下面的视频内容：
<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【每日一练】90—CSS实现图片悬停叠加动画效果</title> <link rel="stylesheet" href="style.css"></head><body> <div class="container"> <div class="card"> <div class="imgBx"> <img src="img1.jpg"> </div> <div class="contentBx"> <div class="content"> <h3>Post One</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> <div class="card"> <div class="imgBx"> <img src="img2.jpg"> </div> <div class="contentBx"> <div class="content"> <h3>Post Two</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> <div class="card"> <div class="imgBx"> <img src="img3.jpg"> </div> <div class="contentBx"> <div class="content"> <h3>Post Three</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> <div class="card"> <div class="imgBx"> <img src="img4.jpg"> </div> <div class="contentBx"> <div class="content"> <h3>Post Four</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> <div class="card"> <div class="imgBx"> <img src="img5.jpg"> </div> <div class="contentBx"> <div class="content"> <h3>Post Five</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> <div class="card"> <div class="imgBx"> <img src="img6.jpg"> </div> <div class="contentBx"> <div class="content"> <h3>Post Six</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div> </div> </div></body></html>@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@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; min-height: 100vh; background: #222;}.container{ position: relative; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; max-width: 1100px;}.container .card{ position: relative; width: 320px; height: 320px; margin: 15px; overflow: hidden;}.container .card .imgBx,.container .card .contentBx{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}.container .card .imgBx img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}.container .card .contentBx::before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transition: transform 0.5s ease-in-out; transform-origin: right; transition-delay: 0.5s;}.container .card:hover .contentBx::before{ transform: scaleX(1); transition: transform 0.5s ease-in-out; transform-origin: left; transition-delay: 0s;}.container .card .contentBx{ display: flex; justify-content: center; align-items: center;}.container .card .contentBx .content{ position: relative; padding: 30px; z-index: 1; transition: 0.5s; transform: translateX(-300px); transition-delay: 0s;}.container .card:hover .contentBx .content{ transform: translateX(0px); transition-delay: 0.5s;}.container .card .contentBx .content h3{ font-size: 1.3em; text-transform: uppercase; letter-spacing: 1px;}.container .card .contentBx .content p{ font-size: 1em; line-height: 1.4em; font-weight: 300;}写在最后
以上就是今天【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号