css3 animation 动画

最新推荐文章于 2022-05-05 12:46:11 发布

快乐的高兴的学习代码中

最新推荐文章于 2022-05-05 12:46:11 发布

阅读量657

点赞数 1

本文链接：https://blog.csdn.net/A123ppleQueen/article/details/118368262

版权

动画

css3可以创建动画，可以取代许多网页动画图像、flash动画和javaScript实现的效果。

动画是使元素从一种样式逐渐变为另一种样式的效果。

from to 相当于百分比的）0%和100% 这用来规定变化发生的时间

0% 表示动画的开始

100% 表示动画的完成

动画效果从一个颜色变为另外一个颜色

设置颜色

@keyframes 名称{

from{background-color:颜色 }

to{background-color:颜色 }

}

绑定在元素上动画才有效，在绑定的元素上规定时间长度

xx{

......

animation:名称时间长度

}

注意：如果省略了动画的持续时间，

注意：因为有浏览器支持的问题，所以如果不行的话请加上前缀再写一遍，一般好像建议直接加上

效果展示 animation动画从一个颜色变为另外一个颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 创建动画后需要把它绑定在元素上，才有效果 */
		/* animation：xx xx 第一个动画名称 第二个动画时长 */
		p{
		  display: block;
		  width:100px;
		  height:100px;
		  animation: name 5s;
		  -webkit-animation: name 5s;
		}
		/* 动画效果是从蓝色变为紫色 */
		@keyframes name{
			from{background-color: #6495ED;}
			to{background-color: #8A2BE2;}
		}
		/* 如果浏览器不支持，可以在下面添加一些代码 */
		@-webkit-@-webkit-keyframes name{
			from{background-color: #6495ED;}
			to{background-color: #8A2BE2;}
		}
		</style>
	</head>
	<body>
		<P>哈密瓜哈密瓜</P>
	</body>
</html>

百分比能设置更多颜色

效果展示animation百分比设置更多颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 创建动画后需要把它绑定在元素上，才有效果 */
		/* animation：xx xx 第一个动画名称 第二个动画时长 */
		p{
		  display: block;
		  width:100px;
		  height:100px;
		  animation: name 8s;
		  -webkit-animation: name 8s;
		}
		/* 百分比能用的背景颜色好像更多 */
		@keyframes name{
		    0% {background-color: #6495ED;}
			25% {background-color: #8A2BE2;}
			30%{background-color: #DC143C;}
			50%{background-color: #FFA500;}
			70%{background-color: darkgreen;}
			100%{background-color: chartreuse;}
		}
		/* 如果浏览器不支持，可以在下面添加一些代码 */
		/* 这里是为了防止chrome浏览器不支持，其他代码与上面一样 */
		@-webkit-@-webkit-keyframes name{
			0% {background-color: #6495ED;}
			25% {background-color: #8A2BE2;}
			30%{background-color: #DC143C;}
			50%{background-color: #FFA500;}
			70%{background-color: darkgreen;}
			100%{background-color: chartreuse;}
		}
		</style>
	</head>
	<body>
		<P>哈密瓜哈密瓜</P>
	</body>
</html>

动画更改位置并且变颜色

通过position更改位置

animation更改位置和背景颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 创建动画后需要把它绑定在元素上，才有效果 */
		/* animation：xx xx 第一个动画名称 第二个动画时长 */
		p{
		  display: block;
		  width:100px;
		  height:100px;
		  position: relative;
		  animation: name 12s;
		  -webkit-animation: name 12s;
		}
		/* 更改颜色和位置 */
		/* 用position更改位置 */
		@keyframes name{
		    0% {background-color: #6495ED;left:0px; top:0px;}
			25% {background-color: #8A2BE2;left:200px;top:0px;}
			30%{background-color: #DC143C;left:200px;top:60px;}
			50%{background-color: #FFA500;right:-60px;top:60px;}
			70%{background-color: darkgreen;right:-30px;top:100px;}
			100%{background-color: chartreuse;right:-70px;top:80px;}
		}
		/* 如果浏览器不支持，可以在下面添加一些代码 */
		/* 这里是为了防止chrome浏览器不支持，其他代码与上面一样 */
		@-webkit-@-webkit-keyframes name{
			0% {background-color: #6495ED;left:0px; top:0px;}
			25% {background-color: #8A2BE2;left:60px;top:0px;}
			30%{background-color: #DC143C;left:60px;top:60px;}
			50%{background-color: #FFA500;right:60px;top:60px;}
			70%{background-color: darkgreen;right:30px;top:100px;}
			100%{background-color: chartreuse;right:70px;top:120px;}
		}
		</style>
	</head>
	<body>
		<P>哈密瓜哈密瓜</P>
	</body>
</html>

@keyframs 所有属性

@keyframs 规定动画

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

animation-name 规定@keyframe动画的名称

animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认是0

animation-timing-function 规定动画的速度曲线，默认是ease

animation-fill-mode 规定当动画不播放时，要应用的样式。或者当动画完成时、或者当动画有一个延迟为开始播放时

animation-delay 规定动画何时开始，默认为0

animation-iteration-count 规定动画被播放的次数。默认为1

animation-direction 规定动画是否在下一周逆向地播放，默认为normal

animation-play-state 规定东华是否正在运行或暂停，默认是running

这些值之后再谈论

animation的简写

属性的顺序为

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation-paly-state

简写练习

效果展示 animation简写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 创建动画后需要把它绑定在元素上，才有效果 */
		/* animation：xx xx 第一个动画名称 第二个动画时长 */
		p{
		  display: block;
		  width:100px;
		  height:100px;
		  position: relative;
		  animation: name 12s linear 2s infinite alternate;
		  -webkit-animation: name 12s linear 2s infinite alternate;
		}
		/* 更改颜色和位置 */
		/* 用position更改位置 */
		@keyframes name{
		    0% {background-color: #6495ED;left:0px; top:0px;}
			25% {background-color: #8A2BE2;left:200px;top:0px;}
			30%{background-color: #DC143C;left:200px;top:60px;}
			50%{background-color: #FFA500;right:-60px;top:60px;}
			70%{background-color: darkgreen;right:-30px;top:100px;}
			100%{background-color: chartreuse;right:-70px;top:80px;}
		}
		/* 如果浏览器不支持，可以在下面添加一些代码 */
		/* 这里是为了防止chrome浏览器不支持，其他代码与上面一样 */
		@-webkit-@-webkit-keyframes name{
			0% {background-color: #6495ED;left:0px; top:0px;}
			25% {background-color: #8A2BE2;left:60px;top:0px;}
			30%{background-color: #DC143C;left:60px;top:60px;}
			50%{background-color: #FFA500;right:60px;top:60px;}
			70%{background-color: darkgreen;right:30px;top:100px;}
			100%{background-color: chartreuse;right:70px;top:120px;}
		}
		</style>
	</head>
	<body>
		<P>哈密瓜哈密瓜</P>
	</body>
</html>

快乐的高兴的学习代码中

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
css3 animation 动画

动画css3可以创建动画，可以取代许多网页动画图像、flash动画和javaScript实现的效果。动画是使元素从一种样式逐渐变为另一种样式的效果。from to 相当于百分比的）0%和100% 这用来规定变化发生的时间0% 表示动画的开始100% 表示动画的完成动画效果从一个颜色变为另外一个颜色设置颜色@keyframes 名称{ from{background-color:颜色 } to{background-color:颜色 } }绑定...
复制链接

扫一扫