Web前端开发之CSS学习笔记11—文本格式和动画设计

最新推荐文章于 2024-04-18 19:11:54 发布

云卷云舒_jing

最新推荐文章于 2024-04-18 19:11:54 发布

阅读量266

点赞数 2

分类专栏： web前端文章标签： css 前端学习 css3

本文链接：https://blog.csdn.net/qq_45709187/article/details/125301693

版权

web前端专栏收录该内容

14 篇文章 7 订阅

订阅专栏

4.设置字符间距letter-spacing

6.设置行高line-height

7.纵向对齐文本vertical-align

8.创建文本阴影text-shadow

9.控制断词word-break

10.控制文本溢出

11.装饰文本text-decoration

12.转换大小写text-transform

13.字体font

14.过度transition

14.1过渡延迟transition-delay

14.2指定过渡元素和持续时间

15.自定义运动轨迹cubic-bezier()

21.修改变形原点transf-origin

22.3D变形方式

23.修改视域perspective

24.处理背面backface-visibility

27.混合模式mix-blend-mode

1.文本对齐text -align

例子1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置文本对齐</title>
		<style type="text/css">
			p{
				color: red;
				background-color:lightgray;
			}
			.start{
				text-align: start;
			}
			.end{
				text-align: end;
			}
			.left{
				text-align: left;
			}
			.right{
				text-align: right;
			}
			.center{
				text-align: center;
			}
			.justify{
				text-align: justify;
			}
		</style>
	</head>
	<body>
		<p class="start">start</p>
		<p class="end">end</p>
		<p class="left">left</p>
		<p class="right">right</p>
		<p class="center">center</p>
		<p class="justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum error debitis modi aliquid pariatur id ab architecto mollitia necessitatibus possimus fugit tenetur sit, dicta laudantium sequi voluptates officiis accusamus cupiditate.</p>
	</body>
</html>

2.保留空白字符white-space

例子2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>保留空白字符</title>
		<style type="text/css">
			p{
				color: red;
				background-color: lightgray;
				white-space: pre-wrap;
			}
		</style>
	</head>
	<body>
		<p>
			床前明月光，
			疑是地上霜。
			举头望明月，
			低头思故乡。
		</p>
	</body>
</html>

3.设置文本方向direction

例子3：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置文本方向</title>
		<style type="text/css">
			p{
				color: red;
				background-color: lightgray;
				white-space: pre-wrap;
				direction: rtl;/*规定文本的方向 */
				unicode-bidi: bidi-override;/*用于同一个页面里存在从不同方向读进的文本显示*/
			}
		</style>
	</head>
	<body>
		<p>
			床前明月光，
			疑是地上霜。
			举头望明月，
			低头思故乡。
		</p>
	</body>
</html>

例子4：文本垂直方向

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置文本方向</title>
		<style type="text/css">
			p{
				color: red;
				background-color: lightgray;
				writing-mode: vertical-rl;/*设置文本垂直方向*/
				float: right;
			}
		</style>
	</head>
	<body>
		<p>
			床前明月光，<br>
			疑是地上霜。<br>
			举头望明月，<br>
			低头思故乡。
		</p>
	</body>
</html>

4.设置文本缩进text-indent

例子5：首行缩进两字符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置缩进</title>
		<style type="text/css">
			p{
				color:red;
				background-color: lightgray;
				text-indent: 2em;
			}
		</style>
	</head>
	<body>
		<p>
			从明天起,做一个幸福的人。喂马，劈柴，周游世界。从明天起,关心粮食和蔬菜。我有一所房子，面朝大海,春暖花开。从明天起，和每一个亲人通信。告诉他们我的幸福。那幸福的闪电告诉我的。我将告诉每一个人。给每一条河每一座山取一个温暖的名字。陌生人，我也为你祝福。愿你有一个灿烂的前程。愿你有情人终成眷属。愿你在尘世获得幸福。我只愿面朝大海，春暖花开。
		</p>
	</body>
</html>

4.设置字符间距letter-spacing

例子6：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置间距</title>
		<style type="text/css">
			p{
				color: red;
				background-color: lightgray;
				white-space:pre-wrap;
				letter-spacing: 1em;/*字符之间的距离*/
				line-height: 2;	/*行高*/
			}
		</style>
	</head>
	<body>
		<p>
			床前明月光，
			疑是地上霜。
			举头望明月，
			低头思故乡。	
		</p>
	</body>
</html>

6.设置行高line-height

例子7：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置行高</title>
		<style type="text/css">
			.red{
				line-height: 1.5;
				border: 2px solid red;
			}
			.blue{
				line-height: 1.5em;
				border: 2px solid blue;
			}
			.box{
				width: 20em;
				display: inline-block;
				vertical-align: top;
				font-size: 15px;
			}
		</style>
	</head>
	<body>
		<h1>为什么官方推荐在设置lineheight时使用无单位数值</h1>
		<div class="box red">
			<h1>有单位的行高 有单位的行高 有单位的行高 有单位的行高</h1>
			<p>使用长度值和百分比来定义行高具有较差的继承性</p>
		</div>
		<div class="box blue">
			<h1>无单位的行高 无单位的行高 无单位的行高 无单位的行高</h1>
			<p>使用长度值和百分比来定义行高具有较差的继承性</p>
		</div>
	</body>
</html>

7.纵向对齐文本vertical-align

例子：vertical-align

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>纵向对齐文本</title>
		<style type="text/css">
			p{
				font-size: 20px;
				background-color: lightgray;
			}
			img{
				width: 0.5em;
			}
			.top{
				vertical-align: top;
			}
			.middle{
				vertical-align: middle;
			}
			.bottom{
				vertical-align: bottom;
			}
		</style>
	</head>
	<body>
		<p>好好学习，天天向上<img class="top" src="pic/maomao.jpg"/></p>
		<p>好好学习，天天向上<img class="middle" src="pic/maomao.jpg"/></p>
		<p>好好学习，天天向上<img class="bottom" src="pic/maomao.jpg"/></p>
	</body>
</html>

8.创建文本阴影text-shadow

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建文本阴影</title>
		<style type="text/css">
			p{
				font-size: 30px;
				color: red;
				background-color: lightgray;
				white-space: pre-wrap;
				text-shadow: 2px 2px 5px darkred;
			}
			
		</style>
	</head>
	<body>
		<p>
			床前明月光，
			疑是地上霜。
			举头望明月，
			低头思故乡。
		</p>
	</body>
</html>

9.控制断词word-break

例子：word-break: break-all

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>控制断词</title>
		<style type="text/css">
			p{
				color: red;
				background-color: lightgray;
				padding: 10px;
				width: 200px;
				word-break: break-all;
			}
		</style>
	</head>
	<body>
		<p>你知道26个字母是什么吗？是的，它们是“ABCDEFGHIJKLMNOPQRSTUVWXYZ”</p>
	</body>
</html>

未加 word-break

加word-break

10.控制文本溢出

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>控制文本溢出</title>
		<style type="text/css">
			p{
				color: red;
				background-color: lightgray;
				padding: 10px;
				width: 200px;
				white-space: nowrap;/*禁止文件自动换行*/
				overflow: hidden;/*溢出隐藏*/
				text-overflow: ellipsis;/*ellipsis:当对象内文本一处时显示省略标记(...)*/
			}
		</style>
	</head>
	<body>
		<p>你知道26个字母是什么吗？是的，它们是“ABCDEFGHIJKLMNOPQRSTUVWXYZ”</p>
	</body>
</html>

11.装饰文本text-decoration

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>修饰文本</title>
		<style type="text/css">
			P{
				color:red;
				background-color: lightgray;
				text-decoration: underline 2px wavy red; /*红色波浪形粗2px的下划线*/
			}
			a{
				text-decoration: none;/*去掉超链接下划线*/
			}
		</style>
	</head>
	<body>
		<p>你可以通过<a href="https://www.baidu.con">百度</a>查询东西</p>
	</body>
</html>

12.转换大小写text-transform

例子：一律小写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>转换大小写</title>
		<style type="text/css">
			p{
				color: red;
				background-color: lightgray;
				padding: 10px;
				width: 200px;
				word-break: break-all;
				text-transform: lowercase;/*lowercase定义仅有小写字母*/
			}
		</style>
	</head>
	<body>
		<p>你知道26个字母是什么吗？是的，它们是“ABCDEFGHIJKLMNOPQRSTUVWXYZ”</p>
	</body>
</html>

13.字体font

例子：字体和字号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择字体</title>
		<style type="text/css">
			.p1{
				font-family: 'SimHei';
			}
			.p2{
				font-family: 'LiSu';
			}
			.p3{
				font-family: 'KaiTi';
			}
			.p4{
				font-family: 'SimSun';
			}
			.p5{
				font-family: 'YouYuan';
			}
			
			.p6{
				font-size:xx-small;
			}
			.p7{
				font-size:x-small;
			}
			.p8{
				font-size:small;
			}
			.p9{
				font-size: medium;
			}
			.p10{
				font-size: large;
			}
			.p11{
				font-size:x-large;
			}
			.p12{
				font-size:xx-large;
			}
			
			
			.p13{
				font-size: 20px;
			}
			.p14{
				font-size: 100%;
			}
			.p15{
				font-size: 1em;
			}
			.p16{
				font-size: 1rem;
			}
			.p17{
				font-size: 2vw;
			}
		</style>
	</head>
	<body>
		<h1>1.不同字体</h1>
		<p class="p1">这是黑体</p>
		<p class="p2">这是隶书</p>
		<p class="p3">这是楷体</p>
		<p class="p4">这是宋体</p>
		<p class="p5">这是幼圆体</p>
		<h1>2.字体大小</h1>
		<p class="p6">xx-small好好学习</p>
		<p class="p7">x-small好好学习</p>
		<p class="p8">small好好学习</p>
		<p class="p9">medium好好学习</p>
		<p class="p10">large好好学习</p>
		<p class="p11">x-large好好学习</p>
		<p class="p12">xx-large好好学习</p>
		<h1>3.字体单位</h1>
		<p class="p13">20px的字体大小</p>
		<p class="p14">100%表示占父元素字号的百分比</p>
		<p class="p15">em表示父元素字号的倍数</p>
		<p class="p16">rem表示根元素字号的倍数</p>
		<p class="p17">vw表示视口宽度，随着浏览器放大缩小，字体尺寸会随之改变</p>
	</body>
</html>

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择字体</title>
		<style type="text/css">
			.w2{
				font-weight: bold;
			}
			.w4{
				font-style: italic;
			}
			.w6{
				font-variant: small-caps;
			}
		</style>
	</head>
	<body>
		<h2>4.字体加粗(font-weight)</h2>
		<p class="w1">好好学习天天向上</p>
		<p class="w2">好好学习天天向上（加粗）</p>
		
		<h2>5.字体风格(font-style)</h2>
		<p class="w3">好好学习天天向上</p>
		<p class="w4">好好学习天天向上（斜体）</p>
		
		<h2>6.字体变形(font-variant)</h2>
		<p class="w5">Hello World</p>
		<p class="w6">Hello World（变形）</p>
	</body>
</html>

14.过度transition

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过渡</title>
		<style type="text/css">
			p{
				color:red;
				background-color: lightgray;
				padding: 20px;
			}
			span{
				transition: 2s;
			}
			span:hover{
				background-color: black;
				font-size: 2em;
		}
		</style>
	</head>
	<body>
		<p>过度是什么？过渡就是使原本“刷”一下就过来的效果，变得<span>丝滑。</span></p>
	</body>
</html>

14.1过渡延迟transition-delay

例子：过渡延迟3s

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过渡</title>
		<style type="text/css">
			p{
				color:red;
				background-color: lightgray;
				padding: 20px;
			}
			span{
				transition: 2s;
				transition-delay: 3s;/*过渡延迟*/
			}
			span:hover{
				background-color: black;
				font-size: 2em;
	    	}
		</style>
	</head>
	<body>
		<p>过度是什么？过渡就是使原本“刷”一下就过来的效果，变得<span>丝滑。</span></p>
	</body>
</html>

14.2指定过渡元素和持续时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过渡</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background:lightblue;
				transition-property:width,height;/*指定应用过渡的属性名*/
				transition-duration:2s,4s;/*过渡的持续时间*/
			}
			div:hover{
				width: 300px;
				height: 300px;
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

15.自定义运动轨迹cubic-bezier()

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

例子：曲线运动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过渡曲线</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 30px;
				color: red;
				padding: 10px;
				margin:20px;
				background-color:lightgray;
				transition: width 3s;
			}
			#div1{
				transition-timing-function: ease;
			}
			#div2{
				transition-timing-function: linear;
			}
			#div3{
				transition-timing-function: ease-in;
			}
			#div4{
				transition-timing-function: ease-out;
			}
			#div5{
				transition-timing-function: ease-in-out;
			}
			#div6{
				transition-timing-function:cubic-bezier(0.18,0.99,0.97,-0.12);
			}
	
			div:hover{
				width: 600px;
			}
		</style>
	</head>
	<body>
		<div id="div1">ease</div>
		<div id="div2">linear</div>
		<div id="div3">ease-in</div>
		<div id="div4">ease-out</div>
		<div id="div5">ease-in-out</div>
		<div id="div6">贝赛尔曲线</div>
	</body>
</html>

16.卡点步进steps()

steps(number, position)

number 整数值，表示把动画分成了多少段。
position 可选参数，表示动画跳跃执行是在时间段的开始还是结束。

steps(5,start);

start 在时间段的开头处跳跃
end 在时间段的结束处跳跃

例子：卡点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过渡曲线</title>
		<style type="text/css">
			div{
				width: 100px;
				height: 30px;
				color: red;
				padding: 10px;
				margin:20px;
				background-color:lightgray;
				transition: width 3s;
			}
			#div7{
				transition-timing-function:steps(5,start);
			}
			#div8{
				transition-timing-function:steps(5,end);
			}
			
			div:hover{
				width: 600px;
			}
		</style>
	</head>
	<body>
		<div id="div7">卡点步进start</div>
		<div id="div8">卡点步进end</div>
	</body>
</html>

17.旋转rotate()

17.1 2D旋转

例子：2D旋转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2D旋转</title>
		<style type="text/css">
			div{
				display: inline-block;
				width: 200px;
				height: 200px;
				margin: 20px;
				padding: 20px;
				transition: 2s;
				color: red;
				background-color: lightgray;
			}
			.rotate_L:hover{
				background-color: pink;
				transition: 2s;
				transform: rotate(-1800deg);
			}
			.rotate_R:hover{
				background-color:pink ;
				transition: 2s;
				transform: rotate(1800deg);
			}
		</style>
	</head>
	<body>
		<div class="rotate_L">2D向左旋转</div>
		<div class="rotate_R">2D向右旋转</div>
	</body>
</html>

17.2 3D旋转

例子:3D旋转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D旋转</title>
		<style type="text/css">
			div{
				display:inline-block;
				width: 100px;
				height: 100px;
				margin: 20px;
				padding: 20px;
				transition: 2s;
				color: red;
				background-color: lightgray;
			}
			.x_rotate:hover{
				background-color:pink;
				transition: 2s;
				transform: rotateX(180deg);
			}
			.y_rotate:hover{
				background-color: pink;
				transition: 2s;
				transform: rotateY(180deg);
			}
			.z_rotate:hover{
				background-color: pinky;
				transition: 2s;
				transform: rotateZ(180deg);
			}
			.rotate3d:hover{
				background-color: pink;
				transition: 2s;
				transform: rotate3D(1,1,1,180deg);
			}
		</style>
	</head>
	<body>
		<div class="x_rotate">3D基于x轴旋转</div>
		<div class="y_rotate">3D基于y轴旋转</div>
		<div class="z_rotate">3D基于z轴旋转</div>
		<div class="rotate3d">3D基于3个轴轴旋转</div>
	</body>
</html>

18.2D移动translate

例子：2D移动效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2D移动效果</title>
		<style type="text/css">
			div{
				display:inline-block;
				width: 100px;
				height: 100px;
				margin: 20px;
				padding: 20px;
				transition: 2s;
				color: red;
				background-color: lightgray;
			}
			.x_translate:hover{
				background-color: pink;
				transition: 2s;
				transform: translateX(-200px);
			}
			.y_translate:hover{
				background-color: pink;
				transition: 2s;
				transform: translateY(200px);
			}
			.xy_translate:hover{
				background-color: pink;
				transition: 2s;
				transform: translate(-200px,200px);
			}
		</style>
	</head>
	<body>
		<div class="x_translate">沿着x轴移动</div>
		<div class="y_translate">沿着y轴移动</div>
		<div class="xy_translate">沿着xy轴移动</div>
	</body>
</html>

19.2D缩放scale

例子：2D缩放

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2D缩放效果</title>
		<style type="text/css">
			div{
				display:inline-block;
				width: 100px;
				height: 100px;
				margin: 20px;
				padding: 20px;
				transition: 2s;
				color: red;
				background-color: lightgray;
			}
			.x_scale:hover{
				background-color: pink;
				transition: 2s;
				transform: scaleX(1.5);
			}
			.y_scale:hover{
				background-color: pink;
				transition: 2s;
				transform: scaleY(0.5);
			}
			.xy_scale:hover{
				background-color: pink;
				transition: 2s;
				transform: scale(1.5,0.5);
			}
		</style>
	</head>
	<body>
		<div class="x_scale">沿着x轴放大</div>
		<div class="y_scale">沿着y轴缩小</div>
		<div class="xy_scale">沿着xy轴伸缩</div>
	</body>
</html>

20.2D倾斜skew

例子：2D倾斜效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2D倾斜效果</title>
		<style type="text/css">
			div{
				display:inline-block;
				width: 100px;
				height: 100px;
				margin: 20px;
				padding: 20px;
				transition: 2s;
				color: red;
				background-color: lightgray;
			}
			.x_skew:hover{
				background-color: pink;
				transition: 2s;
				transform: skewX(45deg);
			}
			.y_skew:hover{
				background-color: pink;
				transition: 2s;
				transform: skewY(45deg);
			}
			.xy_skew:hover{
				background-color: pink;
				transition: 2s;
				transform: skew(15deg,30deg);
			}
		</style>
	</head>
	<body>
		<div class="x_skew">基于x轴倾斜</div>
		<div class="y_skew">基于y轴倾斜</div>
		<div class="xy_skew">基于xy轴倾斜</div>
	</body>
</html>

21.修改变形原点transf-origin

例子：旋转原点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>修改变形原点</title>
		<style type="text/css">
			div{
				display:inline-block;
				width: 200px;
				height: 200px;
				margin: 20px;
				padding: 20px;
				transition: 2s;
				color: red;
				background-color: lightgray;
			}
			.left_top{
				transform-origin: left top;
			}
			.right_bottom{
				transform-origin: right bottom;
			}
			.length{
				transform-origin: 50px 100px;
			}
			.percent{
				transform-origin: 80% 80%;
			}
			
			.left_top:hover{
				background-color: pink;
				transform: rotate(45deg);
			}
			.right_bottom:hover{
				background-color: pink;
				transform: rotate(45deg);
			}
			.length:hover{
				background-color: pink;
				transform: rotate(45deg);
			}
			.percent:hover{
				background-color: pink;
				transform: rotate(45deg);
			}
			
		</style>
	</head>
	<body>
		<div class="left_top">以左上角为原点</div>
		<div class="right_bottom">以右下角为原点</div>
		
		<div class="percent">以(80%,80%)为原点</div>
		<div class="length">以(50px,100px)为原点</div>
	</body>
</html>

22.3D变形方式

例子：3D变形

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>3D变形方式</title>
		<style type="text/css">
			div{
				padding: 50px;
				transition:2s ;
			}
			.lightgray{
				background-color: lightgray;
				transform-style: preserve-3d;
			}
			.red{
				background-color: red;
			}
			.lightgray:hover{
				transform: rotateY(45deg);
			}
			.red:hover{
				transform: rotateY(-45deg);
			}
		</style>
	</head>
	<body>
		<div class="lightgray">好好学习
			<div class="red">天天向上</div>
		</div>
	</body>
</html>

23.修改视域perspective

例子：不同视域效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>修改视域</title>
		<style type="text/css">
			div{
				display:inline-block;
				width: 200px;
				height: 200px;
				margin: 10px;
				padding: 10px;
				transition: 2s;
				color: red;
				background-color: lightgray;
			}
			.pers100:hover{
				background-color: pink;
				transform: perspective(100px) rotateY(-45deg);
			}
			.pers200:hover{
				background-color: pink;
				transform: perspective(200px) rotateY(-45deg);
			}
			.pers800:hover{
				background-color: pink;
				transform: perspective(800px) rotateY(-45deg);
			}
			.pers2000:hover{
				background-color: pink;
				transform: perspective(2000px) rotateY(-45deg);
			}
			.nopers:hover{
				background-color: pink;
				transform: rotateY(-45deg);
			}
		</style>
	</head>
	<body>
		<div class="pers100">100px深度的视域</div>
		<div class="pers200">200px深度的视域</div>
		<div class="pers800">800px深度的视域</div>
		<div class="pers2000">2000px深度的视域</div>
		<div class="nopers">没有设置视域</div>
	</body>
</html>

例子：图片视域效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>视域</title>
		<style type="text/css">
			div{
				width: 600px;
				height: 200px;
				margin: 0 auto;
			}
			img{
				width: 200px;
			}
			.one img{
				transform: perspective(200px) rotateX(30deg);
			}
			.two img{
				transform: rotateX(30deg);
			}
			.two{
				perspective: 200px;
				
			}
		</style>
	</head>
	<body>
		<div><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/></div>
		<div class="one"><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/></div>
		<div class="two"><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/></div>
	</body>
</html>

例子：perspective-origin改变基点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>视域</title>
		<style type="text/css">
			div{
				width: 600px;
				height: 200px;
				margin: 0 auto;
			}
			img{
				width: 200px;
			}
			.one img{
				transform: perspective(200px) rotateX(30deg);
			}
			.two img{
				transform: rotateX(30deg);
			}
			.two{
				perspective: 200px;
				perspective-origin: left top;/*改变基点*/
			}
		</style>
	</head>
	<body>
		<div><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/></div>
		<div class="one"><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/></div>
		<div class="two"><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/><img src="pic/duo.jpg"/></div>
	</body>
</html>

24.处理背面backface-visibility

例子：背面处理

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背面处理</title>
		<style type="text/css">
			div{
				display:inline-block;
				width: 200px;
				height: 200px;
				margin: 10px;
				padding: 10px;
				transition: 2s;
				color: red;
				background-color: lightgray;
			}
			.one:hover{
				background-color: pink;
				transform: rotateY(180deg);
			}
			.two:hover{
				background-color: pink;
				backface-visibility: hidden;
				transform: rotateY(180deg);
				
			}
		</style>
	</head>
	<body>
		<div class="one">背面可见</div>
		<div class="two">背面隐藏</div>
	</body>
</html>

25.动画

关键帧@keyframes

关键帧：计算机动画术语，指动画从当前的样式转变成最终样式的一个规则。

animation-delay：动画开始前的延迟
animation-iteration-count：动画的播放次数
animation-direction：指定动画方向
animation-fill-mode：指定动画填充模式

例子：关键帧

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定义和引用关键帧</title>
		<style type="text/css">
			@keyframes example1{
				from{
					background-color: red;
				}
				to{
					background-color: green;
				}
			}
			@keyframes example2{
				0%{
					background-color:pink;
				}
				25%{
					background-color:lemonchiffon;
				}
				50%{
					background-color: lightblue;
				}
				75%{
					background-color: lightgray;
				}
			}
			
			div{
				display:inline-block;
				width: 200px;
				height: 200px;
				margin:50px;
			}
			.one{
				animation-name: example1;
				animation-duration: 6s;
				animation-iteration-count: 6;
			}
			.two{
				animation-name: example2;
				animation-delay: 2s;/*动画开始前的延迟*/
				animation-duration: 6s;
				animation-iteration-count: 6;/*动画的播放次数*/
				animation-direction: alternate;/*指定动画方向，alternate意为第一次是顺时针播放颜色，第二次逆时针播放颜色，之后依次……*/
			}
		</style>
	</head>
	<body>
		<div class="one"></div>
		<div class="two"></div>
	</body>
</html>

animation-fill-mode：指定动画填充模式

例子：皮球降落

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>皮球动画演示</title>
		<style type="text/css">
			@keyframes example{
				0%{
					transform: translateY(0PX);
					animation-timing-function: ease-in;
				}
				15%{
					transform: translateY(250px);
					animation-timing-function: ease-out;
				}
				30%{
					transform: translateY(30px);
					animation-timing-function: ease-in;
				}
				45%{
					transform: translateY(250px);
					animation-timing-function: ease-out;
				}
				55%{
					transform: translateY(90px);
					animation-timing-function: ease-in;
				}
				65%{
					transform: translateY(250px);
					animation-timing-function: ease-out;
				}
				75%{
					transform: translateY(150px);
					animation-timing-function: ease-in;
				}
				80%{
					transform: translateY(250px);
					animation-timing-function: ease-out;
				}
				85%{
					transform: translateY(190px);
					animation-timing-function: ease-in;
				}
				90%{
					transform: translateY(250px);
					animation-timing-function: ease-out;
				}
				94%{
					transform: translateY(230px);
					animation-timing-function: ease-in;
				}
				100%{
					transform: translateY(250px);
					animation-timing-function: ease-out;
				}
				
			}
			div{
				width: 300px;
				height: 300px;
				border-bottom: 2px solid;
			}
			img{
				
				height: 50px;
				position: relative;
				left: 100px;
				animation-name: example;
				animation-duration: 3s;
				animation-direction: alternate;
				animation-fill-mode: forwards;/*指定动画填充模式：动画结束后保留最后一帧画面*/
				
			}
		</style>
	</head>
	<body>
		<div><img src="pic/qiu.jpg"/></div>
	</body>
</html>

26.滤镜filter

26.1 高斯模糊blur

例子：高斯模糊

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>高斯模糊</title>
		<style type="text/css">
			div{
				display: inline-block;
			}
			img{
				width: 200px;
				height: 200px;
				padding: 10px;
			}
			.blur2{
				filter: blur(2px);
			}
			.blur5{
				filter: blur(5px);
			}
		</style>
	</head>
	<body>
		<div><img src="pic/mao.jpg"/></div>
		<div><img class="blur2" src="pic/mao.jpg"/></div>
		<div><img class="blur5" src="pic/mao.jpg"/></div>
	</body>
</html>

26.2 亮度brightness

例子：亮度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>亮度</title>
		<style type="text/css">
			div{
				display: inline-block;
			}
			img{
				width: 200px;
				height: 200px;
				padding: 10px;
			}
			.low{
				filter: brightness(0.5);
			}
			.high{
				filter: brightness(1.5);
			}
		</style>
	</head>
	<body>
		<div><img src="pic/mao.jpg"/></div>
		<div><img class="low" src="pic/mao.jpg"/></div>
		<div><img class="high" src="pic/mao.jpg"/></div>
	</body>
</html>

26.3 投影drop-shadow

例子：投影

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>投影</title>
		<style type="text/css">
			div{
				display: inline-block;
			}
			img{
				width: 200px;
				height: 200px;
				padding: 20px;
			}
			.shadow1{
				filter: drop-shadow(10px 10px);
			}
			.shadow2{
				filter: drop-shadow(10px 10px 10px gray);
			}
		</style>
	</head>
	<body>
		<div><img src="pic/duo.jpg"/></div>
		<div><img class="shadow1" src="pic/duo.jpg"/></div>
		<div><img class="shadow2" src="pic/duo.jpg"/></div>
	</body>
</html>

26.4 应用多个滤镜blend

例子：多个滤镜

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>投影</title>
		<style type="text/css">
			div{
				display: inline-block;
			}
			img{
				width: 200px;
				height: 200px;
				padding: 20px;
			}
			.blend{
				filter:blur(1px) drop-shadow(0 10px 10px gray) opacity(0.8);/*opacity透明度*/
			}
		</style>
	</head>
	<body>
		<div><img src="pic/duo.jpg"/></div>
		<div><img class="blend" src="pic/duo.jpg"/></div>
	</body>
</html>

27.混合模式mix-blend-mode

例子：混合模式：叠底

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				display: inline-block;
			}
			#up{
				position:absolute;
				left:10px;
				top:10px;
				mix-blend-mode: darken;
			}
		</style>
	</head>
	<body>
		<div id="down"><img src="pic/duo.jpg"/></div>
		<div id="up"><img src="pic/name.jpg"/></div>
	</body>
</html>

加mix-blend-mode: darken后

学习视频：B站小甲鱼

笔记整理用作复习查看

云卷云舒_jing

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端开发之CSS学习笔记11—文本格式和动画设计

目录1.文本对齐text -align2.保留空白字符white-space3.设置文本方向direction4.设置文本缩进text-indent4.设置字符间距letter-spacing6.设置行高line-height7.纵向对齐文本vertical-align8.创建文本阴影text-shadow9.控制断词word-break10.控制文本溢出11.装饰文本text-decoration12.转换大小写text-transform13.字体font14.过度transition14.1过渡延迟t
复制链接

扫一扫