动画与变形

程序员文章站 2022-03-18 20:10:03

...

1、动画
通过@keyframes来设置动画序列，序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。

	@keyframes 动画名称{
	from{

	    }
	to{
	
     	}
	}

@keyframes 动画名称 {
				0% {
					left:0;
				}
				...
				100% {
					left:1600px;
				}
			}

2、animation所有动画属性的简写

animation-duration 动画完成一个循环所需时间长度
单位：s,ms 默认值为0
animation-iteration-count 动画迭代次数
默认值为1
infinite 无限循环
animation-name 动画名
animation-delay 动画延迟，即元素加载成功后到动画运行前的时间
单位：s ms 默认值0 ，即加载后立即运行
animation-direction 动画方向
normal
reverse播放帧顺序反转
alternate 交替
alternate-reverse第一次播放时需反转
animation-play-state 暂停/恢复
running 运行状态
paused 暂停状态
animation-fill-mode 填充模式
none 默认值
forwards
backwards
animation-timing-function 动画速度曲线
ease 默认值
ease-in 先慢后快
ease-out 先快后慢
ease-in-out 先慢后快在慢
liner 线性增长

3、第三方css动画库
animate.css
如何应用第三方库css/js【iconfont fontawesome animate.css】：
1. 模块用 npm install xxx
2. 本地下载 animate.css/iconfont.css
3. cdn 别人吧代码管理在别人的服务器（cdn）上,我们在线应用

呼吸灯

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body,html{
			width: 100%;
			height: 100%;
			background-color: black;
		}
	/*	.outer{
			width: 600px;
			height: 600px;
			background-color:black;
			position: absolute;
			top: 100px;
			left: 500px;
			opacity: 0.5;
			border-radius: 50%;
			animation-name: move;
			animation-duration: 5s;
			animation-direction: alternate;
			animation-iteration-count: infinite;

		}*/
		.inner{
			width: 300px;
			height: 300px;
			background-color: yellow;
			margin-left:600px;
			margin-top: 200px;
			border-radius: 50%;
			box-shadow:yellow 0  0 80px;
			opacity:0.5;
			animation-name: move;
			animation-duration: 5s;
			animation-direction: alternate;
			animation-iteration-count: infinite;
		}
		@keyframes move{
			from{
				opacity:0.1 ;
			}
			to{
				opacity: 0.7;
			}
		}

	</style>
</head>
<body>
	<!-- <div class="outer"></div> -->
	<div class="inner"></div>
	
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			box-sizing:border-box;
		}
		.content{
			background-color: #333;
			width: 400px;
			height: 600px;
			margin: 0 auto;
		}
		.content >.box{
			height:400px;
			padding: 40px; 
			animation-name: outer;
			animation-duration: 10s;
			animation-timing-function: linear;
		}
		 .content >.box>.outer{
			height: 100%;
			border:5px solid #fff;
			border-radius: 50%;
			padding: 20px;
			animation-name: inner;
			animation-duration: 10s;
			animation-timing-function: linear;
		}
		.content .box .inner{
			height: 100%;
			border:10px solid #fff;
			border-radius: 50%;

		}
		@keyframes outer{
			25%{
				padding: 30px;
			}
			50%{
				padding: 40px;
			}
		}
		@keyframes inner{
			25%{
				padding: 30px;
			}
			50%{
				padding: 20px;
			}
			75%{
				padding: 30px;
			}
			100%{
				padding: 20px;
			}
		}
	</style>
</head>
<body>
	<div class="content">
		<div class="box">
			<div class="outer">
				<div class="inner">
					
				</div>
			</div>
		</div>
	</div>
</body>
</html>

变形和过渡
transform：把元素变形；
transition：元素的属性变化时，给他一个过渡的动画效果；

旋转rotate
rotateX(angle) 绕X轴旋转
rotateY(angle) 绕X轴旋转
rotateZ(angle) 绕X轴旋转
缩放(scale)
scale函数能够改变元素的大小，scale变换的是通过矢量来实现，它的坐标定义了每个方向的缩放比例。
scale(sx)
scale(sx,sy)
sx代表缩放向量的横坐标
sy代表缩放向量的纵坐标（如果没有指定，默认为与sx的值相等，这样可以保持一致的缩放比例，保持元素的形状）
倾斜
skew(ax,ay)函数表示对元素的剪切或扭转，ax表示水平方向的扭转，ay表示垂直方向的扭转，也可以使shewX(ax)和shewY(ay)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box1{
			width: 100px;
			height: 100px;
			background-color: red;
			margin: 100px auto;
			transform: skewX(10deg);
		}
	</style>
</head>
<body>
	<div class="box1"></div>
</body>
</html>

translate 移动
translate(tx,ty)函数能够移动元素。tx为水平方向移动距离，ty为元素垂直方向移动的距离

对于位移translate()方法，我们分为3种情况：

（1）translateX(x)：元素仅在水平方向移动（X轴移动）；

（2）translateY(y)：元素仅在垂直方向移动（Y轴移动）；

（3）transklate(x,y)：元素在水平方向和垂直方向同时移动（X轴和Y轴同时移动）；

1、translateX(x)方法
语法：

transform:translateX(x);

说明：

在CSS3中，所有变形方法都是属于transform属性，因此所有关于变形的方法前面都要加上“tranform:”，以表示“变形”处理。这一点大家一定要记住。

x表示元素在水平方向（X轴）的移动距离，单位为px、em或百分比等。

当x为正时，表示元素在水平方向向右移动（X轴正方向）；当x为负时，表示元素在水平方向向左移动（X轴负方向）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3位移translate()方法</title>
    <style type="text/css">
        /*设置原始元素样式*/
        #origin
        {
            margin:100px auto;/*水平居中*/
            width:200px;
            height:100px;
            border:1px dashed silver;
        }
        /*设置当前元素样式*/
        #current
        {
            width:200px;
            height:100px;
            color:white;
            background-color: #3EDFF4;
            text-align:center;
            transform:translateX(20px);
            -webkit-transform:translateX(20px);  /*兼容-webkit-引擎浏览器*/
            -moz-transform:translateX(20px);     /*兼容-moz-引擎浏览器*/
        }
    </style>
</head>
<body>
    <div id="origin">
        <div id="current"></div>
    </div>
</body>
</html>

视觉
两种书写方式，一种用在舞台元素上（动画元素的共同父元素），一种用在当前动画元素上

 .stage{
        	perspective: 600px;
        }
 .stage .box{
        	transform: perspective(600px)rotateY(45deg);
        }

变形
视觉原点（perspective-origin）
指眼睛看见的位置，默认舞台或元素中心。
放在其他位置上

perspective-origin:25% 75%;

动画与变形

市场研究与用户研究最本质的区别

百度理财产品之百赚与百赚利滚利有什么区别？百赚和百赚利滚利版的区别对比

谁的续航更出色?智能手表Moto 360与G Watch对比评测

Unity怎么使用Animation制作相机动画?

Moto 360与Apple Watch哪个更漂亮更好?二者区别对比全面评测

新浪微财富怎么样，微财富与余额宝相比哪个好以及哪个收益更高

如何找客户与如何让客户找我们？

SEO优化与网络营销的区别

苹果发布两款新品 15英寸MacBook Pro与 iMac

Android中webview与JS交互、互调方法实例详解