css3实现文字卡片折叠效果
程序员文章站
2022-05-15 17:00:19
...
效果图
静态效果图
鼠标悬浮到标签上的效果
完整实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body,
html {
width: 100%;
height: 100%;
}
body {
background-color: #ff90b3;
}
/* transform: .5s; //过渡时间 */
.text{
width: 600px;
margin: 250px auto 100px;
display: inline-block;
transform: .5s;
display: flex;
}
.text span{
background-color: #fff;
font-size: 40px;
color: #a0a0a0;
width: 120px;
height: 120px;
text-align: center;
line-height: 120px;
transition: .3s;
font-family: Arial, Helvetica, sans-serif;
}
/* 奇数位 */
.text:hover span:nth-child(odd){
transform: skewY(-25deg);
color: #b5b5b5;
box-shadow: 0 60px 20px rgba(0,0,0,.1);
}
/* 偶数位 */
.text:hover span:nth-child(even){
transform: skewY(25deg);
color: #b5b5b5;
box-shadow: 0 60px 20px rgba(0,0,0,.1);
}
</style>
</head>
<body>
<section class="text">
<span>W</span>
<span>H</span>
<span>A</span>
<span>T</span>
<span>F</span>
<span>U</span>
</section>
</body>
</html>
总结
实现此折叠效果 主要使用了CSS3的 transform 属性 ：
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。