今天練習的這個案例，是前幾天我在視訊号上分享過的，但是沒有分享源碼，于是有小夥伴在背景留言說，想要看一下源碼，今天就給需要的小夥伴安排上，這個效果具體看下面視訊，源碼我就不直接打包，但是我直接貼在文章中了，友善浏覽，節省下載下傳時間。
具體的效果，請看下面的視訊：
另外，今天練習項目中的圖檔素材，我也上傳到百度網盤了，需要的小夥伴可以自行擷取，當然，你可以直接用其他的圖檔素材代替，這個都不是什麼大問題。
需要圖檔素材的小夥伴可以自行擷取，位址如下: https://pan.baidu.com/s/10Ag4qT6UwnIwjIVfo-1zVg?pwd=e38y
提取碼: e38y
最後，我們再來看一下實作的代碼。
HTML代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>【每日一練】23—CSS實作圖像懸停動畫的效果</title>
</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> CSS代碼：
@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;
} 寫在最後
以上就是今天【每日一練】的全部内容，希望今天的小練習對你有用，如果你覺得有幫助的話，請點贊我，關注我，并将它分享給你身邊做開發的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。
