分享两个CSS酷炫的卡片动画效果（二）
<p>动效1</p><p>演示：</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_gif/gehCsfcwMoYmql0dS2pt5AVpON6S3JSzGqxuEbFHRGRrHJnRoibYC4SIhaKQVlvwsBRQgErKwicDJ52FHZgCOfJA/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<p>代码：</p>
<pre><code><!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 0;
padding: 0;
}
.box-card {
display: inline-block;
position: relative;
width: 300px;
height: 300px;
margin: 18px;
overflow: hidden;
box-sizing: border-box;
box-shadow: 0px 0px 12px rgba(0, 0, 0, .2);
}
.box-card__img {
width: 100%;
height: 100%;
transition: 0.5s;
}
.box-card__img img {
width: 100%;
height: 100%;
}
.box-card__content {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 100px 20px 10px;
transform: translateY(100%);
box-sizing: border-box;
font-size: 14px;
text-align: center;
background-image: linear-gradient(135deg, #FFA8A8 10%, #FCFF00 100%);
color: #000;
opacity: 0;
transition: 0.5s;
}
.box-card:hover .box-card__img {
position: relative;
transform: scale(0.3) translateY(-110%);
border: 6px solid rgba(255, 255, 255, 0.9);
z-index: 9;
}
.box-card:hover .box-card__content {
transform: translateY(0px);
opacity: 1;
}
</style>
</head>
<body>
<div class="box-card">
<div class="box-card__img">
<img src="./img/img3.jpeg" />
</div>
<div class="box-card__content">
<h3>简介</h3>
<div>
<p>姓名：前端技术营；年龄：永远18岁（在二进制世界里）；联系方式：10101010（请自行转换为十进制）；技能亮点：精通Java（能写出让编译器都颤抖的代码）、JavaScript（能让浏览器怀疑人生）、Python（让代码像蛇一样灵活，但绝不咬人）
</p>
</div>
</div>
</div>
</body>
</html>
</code></pre>
<p>动效2</p>
<p>演示：</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_gif/gehCsfcwMoYmql0dS2pt5AVpON6S3JSzUZRFJMibSks7bJibWcE8ghDQiaib2IUPybKiciaEicNqKDKoSXeS6PHULs53A/640?wx_fmt=gif&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<p>代码：</p>
<pre><code><!DOCTYPE html>
<html>
<head>
<style>
.box-card {
display: inline-block;
position: relative;
width: 300px;
height: 300px;
margin: 18px;
overflow: hidden;
box-sizing: border-box;
box-shadow: 0px 0px 12px rgba(0, 0, 0, .2);
}
.box-card::before,
.box-card::after {
content: '';
position: absolute;
width: 50%;
height: 50%;
transform: scale(0.05);
background: #f40;
opacity: 0;
transition: all 0.5s ease;
}
.box-card::before {
top: 0;
right: 0;
}
.box-card::after {
bottom: 0;
left: 0;
}
.box-card__img {
width: 100%;
height: 100%;
transition: 0.5s;
}
.box-card__img img {
width: 100%;
height: 100%;
}
.box-card__content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 30px;
text-align: center;
color: #000;
opacity: 0;
transition: all 0.5s ease;
}
.box-card__content::before,
.box-card__content::after {
content: '';
position: absolute;
width: 50%;
height: 50%;
z-index: -1;
opacity: 0;
transform: scale(0.05);
background: #f40;
transition: all 0.5s ease;
}
.box-card__content::before {
top: 0;
left: 0;
}
.box-card__content::after {
bottom: 0;
right: 0;
}
.box-card:hover::before,
.box-card:hover::after {
transform: translate(0, 0) scale(1);
opacity: 1;
}
.box-card:hover .box-card__content {
opacity: 1;
}
.box-card:hover .box-card__content::before,
.box-card:hover .box-card__content::after {
transform: translate(0, 0) scale(1);
opacity: 1;
}
</style>
</head>
<body>
<div class="box-card">
<div class="box-card__img">
<img src="./img/img3.jpeg" />
</div>
<div class="box-card__content">
<h3>简介</h3>
<div>
姓名：前端技术营；年龄：永远18岁（在二进制世界里）；联系方式：10101010（请自行转换为十进制）；技能亮点：精通Java（能写出让编译器都颤抖的代码）、JavaScript（能让浏览器怀疑人生）、Python（让代码像蛇一样灵活，但绝不咬人
</div>
</div>
</div>
</body>
</html>
</code></pre>
页:
[1]