#blog文章 列表，鼠标hover视差动画特效
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="post-list-item">
<div class="post-list-item-container">
<div class="item-thumb bg-deepgrey" style="background-image:url('pic.jpg');"></div>
<a href="https://www.linpx.com/p/jvm-heap-dump-configuration-process.html">
<div class="item-desc">
<p>在平时开发、测试过程中、甚至是生产环境中，有时会遇到OutOfMemoryError，Java堆溢出了，这表明程序有严重的问题。我们需要找造成内...</p>
</div>
</a>
</div>
</div>
</body>
</html>
CSS
html,
body {
font-size: 14px;
/* 这是设置document高度100%的正确方式 */
/* height: 100%; */
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background-image: linear-gradient(
110.9deg,
rgba(44, 221, 239, 1) 1.1%,
rgba(14, 191, 210, 1) 37.6%,
rgba(8, 127, 140, 1) 99.2%
);
}
.post-list-item{
width: 50%;
height: auto;
padding: 10px;
}
.post-list-item-container{
position: relative;
width: 100%;
overflow: hidden;
background-color: #fff;
border-radius: 3px;
}
.post-list-item-container .item-thumb{
position: relative;
display: inherit;
min-height: 250px;
transition: transform 1s ease,filter .1s ease;
background-position: 50% 50%;
background-size: cover;
}
.post-list-item-container .item-desc{
box-sizing: border-box;
position: absolute;
top: 0;
overflow: hidden;
width: 100%;
height: 100%;
padding: 40px 28px;
}
.post-list-item-container .item-desc p{
/* width: 100%; */
font-size: 1.3rem;
line-height: 1.5rem;
text-indent: 2rem;
margin: 0;
padding: 0;
word-break: break-all;
opacity: 0;
color: #fff;
}
.post-list-item-container:hover {
box-shadow: 2px 2px 4px rgba(0,0,0,.1);
}
.post-list-item-container:hover .item-desc {
background-color: rgba(0,0,0,.5);
}
.post-list-item-container:hover .item-desc p {
-webkit-animation: fade-in 1s;
animation: fade-in;
animation-duration: 1s;
opacity: 1;
}
@keyframes fade-in{
0% {
transform: translateY(20px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.post-list-item-container:hover .item-thumb {
transform: scale(1.1);
filter: blur(3px);
}
