纯CSS3文章卡片UI设计效果

最新推荐文章于 2024-09-19 16:11:00 发布

MayJay517

最新推荐文章于 2024-09-19 16:11:00 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/mayjay517/article/details/78462741

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>A Article Effect</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css"/>
<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"/>
<style type="text/css">
*{margin: 0;padding: 0;}
body{background: #eee;}
.warp{margin: 50px auto 60px auto;
width: 100%;
display: flex;
align-items: space-around;
max-width: 1200px;}
.tile{width: 380px;height: 380px;
margin: 10px;
background-color: #99aeff;
background-size: cover;
position: relative;
cursor: pointer;
transition: all 0.4s ease-out;

box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.44);
overflow: hidden;
color: white;
font-family:'Microsoft YaHei',sans-serif;}
.tile img{width: 100%;height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 0;
transition: all 0.4s ease-out;}
.tile .text{z-index: 99;
position: absolute;
padding: 30px;
height: calc(100% - 60px);
height: calc(100% - 60px);}
.tile h1{font-weight: 300;
margin: 0;
text-shadow: 2px 2px 10px rgba(0,0,0,0.3);}
.tile h2{
font-weight: 100;
margin: 20px 0 0 0;
font-style: initial;
transform: translateX(200px);
}
.tile p{font-weight: 300;
margin: 20px 0 0 0;
line-height: 25px;
transform: translateX(-200px);
transition-delay: 0.2s;}

.animate-text{opacity: 0;
transition: all 0.6s ease-in-out;}

.tile:hover{
box-shadow: 0px 35px 77px -17px rgba(0,0,0,0.64);
transform: scale(1.05);
}
.tile:hover img{opacity: 0.2;}

.tile:hover .animate-text{
transform: translateX(0);
opacity: 1;}

.dots{position: absolute;
bottom: 20px;
right: 30px;
margin: 0 auto;
width: 30px;height: 30px;
color: currentcolor;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;}
.dots span{width: 5px;height: 5px;
background-color: currentcolor;
border-radius: 50%;
display: block;
opacity: 0;
transition: transform 0.4s ease-out,opacity 0.5s ease;
transform: translateY(30px);}
.tile:hover span{opacity: 1; transform: translateY(0px);}

.dots span:nth-child(1){transition-delay: 0.05s;}
.dots span:nth-child(2){transition-delay: 0.10s;}
.dots span:nth-child(3){transition-delay: 0.15s;}
@mesia (max-width: 1000px){
.wrap {
flex-direction: column;
width: 400px;
}
}
</style>
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header">
<h1>纯CSS3文章卡片UI设计效果<span>A Article Tiles Effect</span></h1>
</header>

<div class="warp">

<div class="tile">
<img src="img/1.jpg"/>
<div class="text">
<h1>Lorem ipsum.</h1>
<h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
<p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken,
pancetta bresaola pork chicken meatloaf.
Flank sirloin strip steak prosciutto kevin turducken.
</p>
<div class="dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>

<div class="tile">
<img src="img/2.jpg"/>
<div class="text">
<h1>Lorem ipsum.</h1>
<h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
<p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken,
pancetta bresaola pork chicken meatloaf.
Flank sirloin strip steak prosciutto kevin turducken.
</p>
<div class="dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>

<div class="tile">
<img src="img/3.jpg"/>
<div class="text">
<h1>Lorem ipsum.</h1>
<h2 class="animate-text">More lorem ipsum bacon ipsum.</h2>
<p class="animate-text">Bacon ipsum dolor amet pork belly tri-tip turducken,
pancetta bresaola pork chicken meatloaf.
Flank sirloin strip steak prosciutto kevin turducken.
</p>
<div class="dots">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>

</div>
</div>
</body>
</html>