css入门学习day05笔记

css动画

一、实现动画样式

       @keyframes 动画名称{
 			from {

 			}
 			to{

 			}
 		}

或===》

            @keyframes 动画名称{
				10% {
					
				}
				20%{

				}
				...
				100%{

				}
			}

二、动画应用

animation-name:动画名称;

animation-name:xiyouji;

animation-duration:		动画持续时间

5s;

animation-delay: 			动画的延迟

1s

 animation-direction 	动画运动方向

reverse / alternate

animation-fill-mode: 	动画结束后保留哪个样式

forwards 保留最后一帧的样式 / backwards 保留第一帧的样式

animation-iteration-count: 	动画执行的次数

4 / infinite

animation-timing-function: 	动画执行的时间曲线

linear / steps

animation-play-state: ;	动画播放状态

running / paused

animation:	速写形式 

animation: 4s linear 0s infinite alternate move_eye

三、第三方动画库（animate.css）

封装了css3的通用的动画样式，专业性强

推荐
https://daneden.github.io/animate.css/

1. 引入动画库
2. 为元素添加class

四、附“呼吸灯”及“梦幻西游”动画代码

外嵌css代码部分：

    html {
    	color: #333;
    	font:normal 12px '微软雅黑','Microsoft YaHei';
    }
    body,ul,ol,p,h1,h2,h3 {
    	margin: 0;
    	padding: 0;
    }
    ul,ol {
    	list-style: none;
    }
    a {
    	text-decoration: none;
    	color: #333;
    }

1、呼吸灯

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>内呼吸灯</title>
    	<style>
    		div {
    			box-sizing: border-box;
    		}
    		/*容器*/
    		.container {
    			width: 300px;
    			height: 500px;
    			background-color: #666;
    			margin: 0 auto;
    		}
    		/*正方形*/
    		.container > .box {
    			height: 300px;
    			padding: 10px;
    
    			animation-name: x;
    			animation-duration: 9s;
    			animation-timing-function: linear;
    			animation-iteration-count: infinite;
    		}
    		/*外圆*/
    		.container > .box > .outer {
    			height: 100%;
    			border-radius: 50%;
    			border:5px solid #ededed;
    			padding: 30px;
    
    			animation-name: y;
    			animation-duration: 9s;
    			animation-timing-function: linear;
    			animation-iteration-count: infinite;
    		}
    
    		/*内圆*/
    		.container > .box > .outer > .inner {
    			height: 100%;
    			border-radius: 50%;
    			border: 10px solid #ccc;
    		}
    
    		/*动画定义*/
    		@keyframes x {
    			25%{
    				padding: 20px;
    			}
    			50% {
    				padding: 30px;
    			}
    			100%{
    				padding: 30px;
    			}
    		}
    
    		@keyframes y {
    			25% {
    				padding: 40px;
    			}
    			50% {
    				padding: 30px;
    			}
    			75% {
    				padding: 42px;
    			}
    			100%{
    				padding: 30px;
    			}
    		}
    
    	</style>
    </head>
    <body>
    	<div class="container">
    		<div class="box">
    			<div class="outer">
    				<div class="inner"></div>
    			</div>
    		</div>
    	</div>
    </body>
    </html>

效果图：

二、梦幻西游

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>梦幻西游</title>
	<link rel="stylesheet" href="../common.css">
	<style>
		.content {
			position: absolute;
			width: 950px;
			left: 50%;
			margin-left: -475px;
			bottom: 300px;
		}
		.content > ul {

		}
		.content > ul::after {
			display: block;
			content: "";
			clear: both;
		}
		.content > ul >li {
			width: 200px;
			height: 180px;
			margin-right: 50px;
			float: left;
			overflow:hidden; 
		}

		.content > ul >li:last-child {
			margin-right: 0;
		}
		.content > ul >li > div {
			width: 1600px;
			height: 180px;
			font-size: 0;

			animation-name: dong;
			animation-duration: 1s;
			/*animation-delay: 1s;*/
			animation-iteration-count: infinite;
			/*animation-direction: reverse;*/
			animation-timing-function: steps(8);
		}
		.content > ul >li > div > img {
			width: 100%;
		}
		/*1. 定义动画*/
		@keyframes dong {
			from {
				margin-left: 0
			}
			to {
				margin-left: -1600px;
			}
		}
		html,body,.main {
			height: 100%;
		}
		.main {
			position: relative;
			width: 100%;
			overflow: hidden;
		}
		.main > .bg {
			position: relative;
			width: 3920px;
			height: 100%;
			background-image: url('./images/bg.jpg');
			background-repeat: repeat-x;

			animation-name: bg;
			animation-duration: 30s;
			animation-timing-function: linear;
			animation-iteration-count: infinite;
		}
		@keyframes bg {
			from {
				left:-1920px;
			}
			to {
				left: 0;
			}
		}
	</style>
</head>
<body>
	<div class="main">
		<!-- 背景 -->
		<div class="bg"></div>
		<!-- 师徒4人 -->
		<div class="content">
			<ul>
				<li>
					<div><img src="./images/wk.png" alt=""></div>
				</li>
				<li>
					<div><img src="./images/bj.png" alt=""></div>
				</li>
				<li>
					<div><img src="./images/ts.png" alt=""></div>
				</li>
				<li>
					<div><img src="./images/ss.png" alt=""></div>
				</li>
			</ul>
		</div>
	</div>
</body>
</html>

效果图 ：