CSS3 骨折文字

最新推荐文章于 2022-08-26 16:14:24 发布

福州司马懿

最新推荐文章于 2022-08-26 16:14:24 发布

阅读量1k

点赞数 1

分类专栏： # CSS3 动画

转载请注明出处——https://blog.csdn.net/chy555chy

本文链接：https://blog.csdn.net/chy555chy/article/details/100079948

版权

CSS3 动画专栏收录该内容

12 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<title>Fracture Text</title>
<meta charset="utf8">
<style>
body {
	background: WhiteSmoke;
}
#fractureText {
	color: black;
	
	/**
	vw/vh指的是相对视口（即浏览器窗口的百分比大小）
	*/
	font-size: 5vw;
	
	/**
	字体粗细，100-900。
	400等同于normal，700等同于bold。
	*/
	font-weight: bold;
	
	/**
	设置如何处理元素中的空白
	normal		默认，空白会被浏览器忽略
	pre			空白会被浏览器保留，类似<pre>标签
	nowrap		不换行，除非遇到<br>标签
	pre-wrap	保留空白符序列，保留换行符
	pre-line	合并空白序列，保留换行符
	inherit		从父元素继承
	*/
	white-space: nowrap;
	
	/**
	控制文本的大小写
	none		不做处理
	capitalize	文本中的每个单词以大写字母开头
	uppercase	所有字母转为大写
	lowercase	所有字母转为小写
	inherit		从父元素继承
	*/
	text-transform: uppercase;
	
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	
	/**
	z-index 元素的堆叠顺序。正数离用户更近，负数更远
	z-index 仅能在绝对定位中有效
	*/
	z-index: 1;
}
#fractureText:before, #fractureText:after {
	/**
	伪元素必须声明content，否则无法显示
	*/
	content: attr(data-text);
	
	position: absolute;
	left: 0;
	width: 100%;
}
#fractureText:before {
	color: white;
	background: white;
	
	/**
	对元素进行剪裁，仅显示该区域的内容。
	这里是剪裁成一个多边形
	*/
	clip-path: polygon(0 0, 100% 0%, 100% 45%, 0 60%);
	
	z-index: 2;
}
#fractureText:after {
	color: black;
	clip-path: polygon(0 0, 100% 0%, 100% 42%, 0 57%);
	/**
	animation-name				动画名称（配合@keyframes使用）
	animation-duration			动画持续时间
	
	animation-timing-function	动画过渡类型
								linear			线性过度
								ease 			平滑过渡
								ease-in			由慢到快
								ease-out		由快到慢
								ease-in-out		由慢到快又变慢
								steps(n, start/end)	阶跃函数，
													第一个参数表示将动画分为几段，
													第二个参数表示阶跃的时机。
								step-start		等同于steps(1, start); 
								step-end		等同于steps(1, end); 
								cubic-bezier	两个控制点的贝塞尔曲线
								
	animation-delay				动画延迟
	animation-iteration-count	动画循环次数(infinite，表示循环播放)
	
	animation-direction			动画正放(normal)还是倒放(alternate)
								normal				正常播放
								reverse				反向播放
								alternate			动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放
								alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放
								initial				保持其初始值
								inherit				从父元素继承
							
	animation-fill-mode			动画不播放时的状态
								none 		不改变默认行为
								forwards 	当动画完成后，保持最后一个属性值
								backwards 	在animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值
								both 		向前和向后填充模式都被应用
								
	animation-play-state		动画播放(running)和暂停(paused)
	*/
	animation: fracture 3s infinite ease;
	z-index: 3;
	
	/**
	可以同时设置多对阴影，中间用逗号隔开即可
	*/
	text-shadow: -3px -3px 5px gray;
}
@keyframes fracture {
	0% {
		transform: translateX(0);
	}
	50% {
		transform: translate(-2vw, 3%);
	}
}
</style>
</head>
<body>
<div id="fractureText" contenteditable data-text="III Fracture Text">III Fracture Text</div>
</body>
</html>