13渐变 过渡 动画 利用多张图片制作动图

13渐变 过渡 动画 利用多张图片制作动图

一、渐变

线性渐变

设置普通渐变
	background:linear-gradient（颜色1，颜色2）

设置渐变比例
	background:linear-gradient（颜色1 *%，颜色2 *%）

设置渐变方向
	background:linear-gradient（to 方向，颜色1 *%，颜色2 *%）
	background:linear-gradient（to 方向1 方向2，颜色1 *%，颜色2 *%）

设置渐变角度
	background:linear-gradient（*deg，颜色1 *%，颜色2 *%）

径向渐变

设置普通渐变
	background:radial-gradient（颜色1，颜色2）

设置渐变比例
	background:radial-gradient（颜色1 *%，颜色2 *%）

设置渐变方向
	background:radial-gradient（circle或者ellipse，颜色1 *%，颜色2 *%）

重复渐变

线性渐变
	background:repeating-linear-gradient（颜色1 *%，颜色2 *%）

径向渐变
	background:repeating-radial-gradient（颜色1 *%，颜色2 *%）

二、过渡

让样式慢慢改变，不会自动触发，常常和属性

:hover{}

配合使用，所以需要鼠标触发才会发生变化

过渡
	transition:变化的属性 执行的时间 延迟的时间 变化的曲线（linear代表执行曲线）

三、动画

动画需要定义动画，对动画变化的情况进行说明，如果不绑定动画则没有效果，所以还需要绑定动画

定义动画

关键字@keyframes

语法一
	@keyframes name{
        from{
            开始的样式代码
        }
        to{
            结束的样式代码
        }
	}
只能描述开始和结束时的状态

语法二
	@keyframes 动画名{
        0%{
            开始的样式代码
        }
        *%{
            期间的中间状态样式代码
        }
        100%{
            结束的样式代码
        }
	}
不仅能描述开始和结束时的状态，还能描述动画过程过程中任一时间的状态，所以推荐第二种，百分比是指时间

绑定动画

说明是哪个盒子需要执行之前定义的动画

animation:动画名 动画执行时间 延迟时间 变化的曲线 次数 执行的方向;
	形如animation:name 3s 0s linear infinite alternate;
	linear		匀速
	infinite	无穷
	alternate	开始到结束，结束到开始

暂停动画，可以设置为鼠标悬浮时完成该效果

div:hover{
    anmation-play-state:paused;
}

四、利用多张图片制作动图

div {
	width: 240px;
	height: 240px;
	}

@keyframes run {
	0% {
		background: url("images/1.jpeg");
	}

	12.5% {
		background: url("images/2.jpeg");
	}

	25% {
		background: url("images/3.jpeg");
	}

	37.5% {
		background: url("images/4.jpeg");
	}

	50% {
		background: url("images/5.jpeg");
	}

	62.5% {
		background: url("images/6.jpeg");
	}

	75% {
		background: url("images/7.jpeg");
	}

	87.5% {
		background: url("images/8.jpeg");
	}

	100% {
		background: url("images/1.jpeg");
	}
}

 div      
    background-size:240px 240px;
	animation: run 0.1s linear infinite;
	}

<div></div>