变形与动画相关属性

最新推荐文章于 2024-05-17 10:26:44 发布

dazhuantoude

最新推荐文章于 2024-05-17 10:26:44 发布

阅读量153

点赞数

本文链接：https://blog.csdn.net/dazhuantoude/article/details/89930724

版权

变形与动画相关属性

一、transform

css3引入了一些可以对网页元素进行变换的属性，比如旋转，缩放，移动，或者沿着水平或者垂直方向扭曲（斜切变换）等等。这些的基础都是transform属性

transform属性有一项奇怪的特性，就是它们对于其周围的元素不会产生影响。换句话说，如果将一个元素旋转45度，它实际上是重叠在元素的上方，下方或者旁边。而不会移动其周围的内容。

旋转：transform:rotate(-45deg);

缩放：transform:scale(.5);scaleX(2);scaleY(3)。如果给了负值，能够达到翻转的效果：scaleX(-1)

移动：transform:translate(1px,2px).使用其他单位：em,%也是可以的。

倾斜：transform:skew(45deg,0);

当然，以上多个tranform的属性可以结合使用；

transform-origin:一般来说，当对一个元素使用transform时，web浏览器就会以元素的中心点作为变黄点。该属性可以指定变换点，可以提供关键字，以pixel为单位的绝对值，以及em,%等等。

<body>
	<div>文字</div>旋转30度
	<div style="position:absolute;left:80px; top:30px; transform-origin:left top; transform: rotate(30deg);">文字</div><br>
	<div>文字</div>旋转45度
	<div style="transform:rotateZ(45deg);">文字</div><br>
	<div>文字</div>绕X轴旋转30度
	<div style="transform:rotateX(30deg);">文字</div><br>
	<div>文字</div>绕Y轴旋转30度
	<div style="transform:rotateY(30deg);">文字</div><br>
	<div>文字</div>绕Z轴旋转30度
	<div style="transform:rotateZ(30deg);">文字</div><br>
	<div>文字</div>绕X,Z同时轴旋转30度
	<div style="transform:rotateX(30deg) rotateZ(30deg);">文字</div><br>
	<div>文字</div>绕Y,Z同时轴旋转30度
	<div style="transform:rotateY(30deg) rotateZ(30deg);">文字</div><br>

	<!-- 位移 -->
	<div>文字</div>未变形<div>文字</div><br>
	<div>文字二</div>沿X轴平移120px<div style="transform:translate(120px);">文字二</div><br>

	<!-- 缩放 -->
	<div>文字</div>沿X轴缩放1.9<div style="transform:scaleX(1.9);">文字</div><br>
	<div>文字</div>沿Y轴缩放0.4<div style="transform:scaleY(0.4);">文字</div><br>
	<div>文字</div>缩放1.9,1.4<div style="transform:scale(1.9,1.4);">文字</div><br>
	<div>文字</div>缩放0.8,2.1<div style="transform:scale(0.8,2.1);">文字</div><br>
</body>

二、transition

transition可以实现动态效果，实际上是一定时间之内，一组css属性变换到另一组属性的动画展示过程。

为了使transition生效，需要做这么几件事：

2）两个样式：一个是最初的样式，一个是最终的样式，transition可以实现这两种演示见的转换过程。

2）transition属性:

transition使用4个属性控制：

要以动画展示哪些属性（transition-property）:可以使用all关键字

动画过程有多久(transition–duration),

控制动画速度变化（transition-timing-function:linear,ease,ease-in,ease-out,ease-in-out，贝塞尔曲线等），动画是否延迟执行（transition-delay）等

 以下代码通过transition属性来实现 指定当鼠标移动到`<div／>`上时，实现背景颜色渐变的效果

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景变化</title>
	<style type="text/css">
		div{
			width:400px;
			height:50px;
			border:1px solid black;
			background-color: green;
			transition: background-color 4s linear;
		}
		div:hover{
			background-color: yellow;
		}
		
	</style>

</head>
<body>
	<div>鼠标移上来变色</div>
</body>
</html>

** 以平滑渐变的方式改变图片位置 **

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		img#target{
			position:absolute;
			width:50px;
			height:50px;
			transition:left 1s linear,top 1s linear;
		}
	</style>
</head>
<body>

	<img id="target" src="balloon.jpg" alt="气球"/>
	<script type="text/javascript">
		var target=document.getElementById("target");
		target.style.left="0px";
		target.style.top="0px";
		// 为鼠标按下时间绑定监听
		document.onmousedown=function(evt){
			// 将鼠标事件的XY坐标付给气球图片的left,top
			target.style.left=evt.pageX+"px";
			target.style.top=evt.pageY+"px";
		}
	</script>
</body>
</html>

**以平滑渐变的方式修改HTML的宽度高度背景色等  **

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景变化</title>
	<style type="text/css">
		div{
			width:400px;
			height:50px;
			border:1px solid black;
			background-color: green;
		}
	</style>

</head>
<body>
	<div id="target1" style="transition:background-color 2s linear 2s,width 2s linear 2s,height 2s linear 2s"></div>
	<button onclick="zoom(2,'blue');">放大</button>
	<button onclick="zoom(0.5,'green');">缩小</button>
	<button onclick="zoom(1,'red');">还原</button>
	<script type="text/javascript">
		var originWidth=200;
		var originHight=160;
		var zoom=function(scale,bgColor){
			var target1=document.getElementById("target1");
			target1.style.width=originWidth * scale+"px";
			target1.style.height=originHight*scale+"px";
			target1.style.bgColor=bgColor;
		}
	</script>
</body>
</html>

三、animation

animation-name:和当初定义的动画名称相对应；
animation-duration：动画执行一次持续的时长；
animation-timing-function：动画速率变化函数；
animation-delay：动画延迟执行的时间长度；
animation-iteration-count：动画执行的次数，可以是数字，或者关键字：infinate(无限运行)；
animation-direction:alternate; alternate(奇数次超前运行，偶数次后退运行).如希望动画从黄色到蓝色，并且再重复一次，使用alternate关键字就能够防止从蓝色突变为黄色
animation-fill-mode:告诉浏览器将元素的格式保持为动画结束时候的样子。

**关键帧的定义 **

@keyframes 关键帧名称{
from | to | 百分比{
属性1：属性值1;
属性1：属性值1;
属性1：属性值1;
…
}
…
}

定义关键帧时，不仅可以制定一个left属性，还可以制定多个css属性，包括前面介绍的transform属性，这样就可以实现更复杂的动画

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		@keyframes complex{
			0%{
				transform: rotate(0deg) scale(1);
				background-color: #fff;
			}
			40%{
				transform: rotate(720deg) scale(0.1);
				background-color: #ff0;
			}
			80%{
				transform: rotate(1080deg) scale(4);
				background-color: #f0f;
			}
			100%{
				transform: rotate(0deg) scale(1);
				background-color: #00f;
			}
		}
		div{
			background-color: gray;
			border:1px solid black;
			position: absolute;
			left: 160px;
			top: 120px;
			width: 60px;
			height: 60px;
		}
		div:hover{
			animation-name: complex;
			animation-duration: 0.7s;
			animation-iteration-count: 100;
		}
	</style>
</head>
<body>
	<div>鼠标悬停。动画开始</div>
</body>
</html>