css3实现文字卡片折叠效果

最新推荐文章于 2022-07-27 15:29:08 发布

置顶 xiyunmengyuan

最新推荐文章于 2022-07-27 15:29:08 发布

阅读量1.3k

点赞数 1

分类专栏： css3动画特效学习 web学习进阶之旅文章标签： css3动画文字卡片折叠效果

本文链接：https://blog.csdn.net/xiyunmengyuan/article/details/106022986

版权

web学习进阶之旅同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

css3动画特效学习

2 篇文章 0 订阅

订阅专栏

效果图

静态效果图
在这里插入图片描述
鼠标悬浮到标签上的效果

完整实现代码

<!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 倾斜转换。

xiyunmengyuan

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
css3实现文字卡片折叠效果

效果图静态效果图鼠标悬浮到标签上的效果完整实现代码<!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>&lt
复制链接

扫一扫

专栏目录