CSS3:text-shadow属性、word-wrap属性、transform属性、transition属性、animation属性、3D变换：transform-style:preserve-3d

最新推荐文章于 2024-11-03 23:12:06 发布

居靖

最新推荐文章于 2024-11-03 23:12:06 发布

阅读量143

点赞数

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/m0_73886399/article/details/130018555

版权

本文介绍了CSS中的text-shadow属性用于设置文本阴影，word-wrap属性用于处理长单词换行，以及如何使用@font-face自定义字体。此外，详细讲解了transform属性的旋转、缩放功能，以及transition和animation实现的过渡和动画效果，包括3D变换中的rotateX,rotateY,rotateZ和perspective属性。

摘要由CSDN通过智能技术生成

text-shadow属性：

text-shadow属性:水平偏移垂直偏移阴影大小颜色

word-wrap属性：

word-wrap属性：允许长单词、URL强制进行换行。normal(默认）、break-word（长单词换行）。

@font-face规则：

<style type="text/css">
			@font-face {
				font-family: name;  /* 定义字体名称 */
				src: url(fonts/mc.ttf);  /* 定义字体来源 */
			}
			p{
				font-family: name;   /* 引用自定义字体名称 */
			}
		</style>

2D转换方法：对元素进行旋转、缩放、移动、拉伸。

transform属性：rotate( )、scale( )

旋转：transform:rotate( deg); //单位deg. 当值为正时，顺时针旋转，为负值时逆时针旋转。

缩放：transform:scale(x,y); x:水平方向缩放的倍数. y:垂直方向缩放的倍数，若省略，同x.

0~1,缩小。大于1放大。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#t{
				border: 1px solid black;
				width: 300px;
				height: 300px;
				margin: 0 auto;
			}
			#right{
				margin: 15px auto;
				border: 1px solid black;
				width: 150px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				transform: rotate(30deg);  /* 顺时针旋转30度 */
			}
			#left{
				margin: 15px auto;
				border: 1px solid black;
				width: 150px;
				height: 100px;
				text-align: center;
				line-height: 100px;
				transform: rotate(-30deg);  /* 逆时针旋转30度 */
			}
			#left:hover{
				transform: scale(1.5);  /* 放大1.5倍 */
			}
		</style>
	</head>
	<body bgcolor="white">
		<div id="t">
			<div id="right">旋转与缩放</div>
			<div id="left">旋转与缩放</div>
		</div>
	</body>
</html>

transition属性：

过渡：transition：将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”。

transition: 属性名持续时间过渡方法；属性名多个时用“ ，”隔开，或用all表示所有属性。

过渡方法的取值有：

值	描述
linear	匀速
ease	快慢快
ease-in	慢快
ease-out	快慢
ease-in-out	慢快慢

animation属性：动画

（1）定义动画——>@keyframes规则。

（2）调用动画——>animation属性。

animation属性
值	描述
animation	简写
animation-name	引用@keyframes动画的名称
animation-duration	动画完成时间
animation-timing-function	规定动画的速度曲线。默认是“ease”
animation-play-state	running \| paused

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			@keyframes wdcolor  /* 动画名称 */
			{
			0% {background-color:red; color: blue;}
			30% {background-color:blue; color: red;}
			60% {background-color:yellow; color: green;}
			100% {background-color:green; color: yellow;}
			}
			#s:hover{
				animation: wdcolor 5s linear;
			}
			#s{
				margin-top: 50px;
				width: 300px;
				height: 200px;
				text-align: center;
				line-height: 200px;
				font-size: 25px;
				font-weight:bold;
				border: 1px solid white;
				background-color: black;
				color: white;
			}
		</style>
	</head>
	<body bgcolor="white">
		
		<div id="s">
			动画效果
		</div>
	</body>
</html>

3D变换：transform-style:preserve-3d

transform属性：

延X轴方向旋转：rotateX( deg)

延Y轴方向旋转：rotateY( deg):

延Z轴方向旋转：rotateZ( deg):

透视属性：perspective;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#r{
				width: 1200px;
				border: 1px solid blue;
				height: 700px;
				margin: 10px auto;
				perspective: 800px;
			}
			img{
				width: 300px;
				height:500px;
			}
			#x,#y,#z{
				width: 302px;
				height: 502px;
				float: left;
				margin-left: 40px;
				margin-top: 100px;
				transition: linear 1s;
				transform-style: preserve-3d;
				border: 1px solid blue;
			}
			#x:hover{
				transform: rotateX(30deg);
			}
			#y:hover{
				transform: rotateY(180deg);
			}
			#z:hover{
				transform: rotateZ(60deg);
			}
		</style>
	</head>
	<body bgcolor="white">
		<div id="r">
			<div id="x">
				<img src="picture/45.png" />
			</div>
			<div id="y">
				<img src="picture/45.png "/>
			</div>
			<div id="z">
				<img src="picture/45.png "/>
			</div>
		</div>
	</body>
</html>