前端基础学习之css3-animation(动画)

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

animation:动画名称花费时间运动曲线何时开始播放次数是否反方向;

属性	描述
@keyframes	规定动画（类似函数的声明）【0-100% / from（与 0% 相同）to（与 100% 相同）】
animation	所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name	规定 @keyframes 动画的名称。(声明与调用类似函数名)
animation-duration	规定动画完成一个周期所花费的秒或毫秒。默认是 0（和过渡动画类似）
animation-timing-function	规定动画的速度曲线。默认是 “ease”。（和过渡动画类似）
animation-delay	规定动画何时开始。默认是 0。（和过渡动画类似
animation-iteration-count	规定动画被播放的次数。默认是 1。（n或者infinite）
animation-direction	规定动画是否在下一周期逆向地播放。默认是 “normal”。（normal或者alternate）
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。(running或者paused)
animation-fill-mode	规定对象动画时间之外的状态。

demo1：简单的心跳效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	img{
		width: 400px;
		animation:heart .5s infinite;

	}
	@keyframes heart{
		0%{
			transform: scale(1);
		}
		50%{
			transform: scale(1.1);
		}
		100%{
			transform: scale(1);
		}
	}
	div{
		margin:100px;
		width: 100px;
		height: 100px;
		background-color: red;
		animation: heart .5s infinite;
	}
	</style>
</head>
<body>
	<img src="img/animation/1.jpg" alt="">
	<div></div>
</body>
</html>

demo2：转圈效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin:0;
		padding: 0;
	}
	div{
		margin:200px;
		width: 214px;
		height: 214px;
		position: relative;
	}
	div img{
		animation: circle 2s linear infinite;

	}
	div p{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		text-align: center;
		line-height: 214px;
	}
	@keyframes circle {
		from{
			transform: rotate(0deg);
		}
		to{
			transform: rotate(360deg);
		}
	}
	</style>
</head>
<body>
	<div><img src="img/animation/web.png" alt=""><p>web 前端</p></div>
</body>
</html>

demo3：大海太阳
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin:0;
		padding: 0;
	}
		html,body{
			width: 100%;
			height: 100%;
			overflow: hidden;
			background-color: #0EA9B1;
		}
		img{
			width: 100%;
			height: auto;
			position: absolute;
			bottom: 0;
			left: 0;
		}
		img:nth-child(2){
			animation: sea 2.5s linear infinite;
		}
		img:last-child{
			animation: sea 2.5s linear 1s infinite;
		}
		div{
			width: 100px;
			height: 100px;
			position: relative;
			margin:100px;
		}
		div::before, div::after{
			content: "";
			position: absolute;
			top: 50%;
			height: 50%;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			transform: translate(-50%,-50%);
			background: rgba(255,255,255,0.8);
			animation: sun 3s linear infinite;
		}
		div::after{
			width: 80px;
			height: 80px;
			animation: sun 2.8s linear infinite;
		}
		@keyframes sea{
			0%{
				bottom: 0;
			}
			50%{
				bottom: -50px;
			}
			100%{
				bottom: 0;
			}
		}
		@keyframes sun{
			0%{
				transform:translate(-50%,-50%) scale(1);
				box-shadow: 0 0 5px rgba(255,255,255,0.7);
			}
			50%{
				transform:translate(-50%,-50%) scale(1.2);
				box-shadow: 0 0 30px rgba(255,255,255,0.7);
			}
			100%{
				transform:translate(-50%,-50%) scale(1);
				box-shadow: 0 0 5px rgba(255,255,255,0.7);
			}
		}
	</style>
</head>
<body>
	<div></div>
	<img src="img/animation/1.png" alt="">
	<img src="img/animation/2.png" alt="">
</body>
</html>

前端基础学习之css3-animation(动画)

猜你喜欢