1
fashghdhgbljsdhgdfdg
Read More@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&display=swap');
* {
margin:0;
padding:0;
font-family:'Poppins',sans-serif;
box-sizing:border-box;
}
body {
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:linear-gradient(0deg,#fff 50%,#74b9ff);
}
.container {
max-width:1000px;
position:relative;
display:flex;
justify-content:center;
flex-wrap:wrap;
transition:0.5s;
}
.container:hover .card {
filter:blur(5px);
transform:scale(0.7);
}
.container .card:hover {
filter:blur(0px);
transform:scale(1);
}
.container .card {
position:relative;
width:250px;
height:300px;
background:#fff;
display:flex;
justify-content:center;
align-items:center;
transition:0.5s;
}
.container .card:before {
content:'';
position:absolute;
width:100%;
height:100%;
z-index:1;
background:#FFF;
transition:0.5s;
}
.container .card:hover:before {
background:#000;
transform:scaleY(1.15);
box-shadow:0 5px 15px rgba(0,0,0,0.2);
}
.container .card .content {
text-align:center;
z-index:2;
padding:0 20px;
transition:0.5s;
}
.container .card:hover .content {
color:#FFF;
}
.container .card .content h2 {
font-size:3em;
}
.container .card .content p {
font-size:0.9em;
}
.container .card .content a {
display:inline-block;
margin-top:15px;
padding:5px 10px;
color:#fff;
background:#262626;
text-decoration:none;
}
.container .card:hover .content a {
background:#74b9ff;
}
更新时间:2019-12-24 16:46:28