CSS3 学习笔记（动画多媒体查询）

动画

　　1、@keyframes规则用于创建动画。在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果

　　2、使用animation进行动画捆绑。两个值：动画名称、时长
　　3、我们一般情况下使用0%~100%来规定动画发生的时机。或者使用关键词from...to...，效果等同于0%~100%。
　　4、加上一个infinite值就可以无限执行了
　　5、ease——默认开始慢慢加速，结束时慢慢减速。
　　linear——默认始终使用相同速度运行。
　　alternate——交替执行（也可以成为正反执行）

　　代码：

!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 300px;
				height: 300px;
				background-color: #000000;
				position: relative;/* 需要位置改变所以添加了position */
				animation: myfirst 3s alternate infinite linear;/* 动画捆绑两个值 动画名称 动画时长 再加一个无限执行和交替执行 */
			}
			@keyframes myfirst{
				from{background-color: red;border-radius: 99px;box-shadow: -35px 0px 15px green;left: 0px;right: 0px;}
				to{background-color: #0000FF;border-radius: 0px;left: 400px;right: 0px;}
			}
		</style>
	</head>
	<body>
		<div id="">
			
		</div>
	</body>
</html>

多媒体查询

　　520 到 699px：@media screen and (max-width: 699px) and (min-width: 520px) {ul li a {padding-left: 30px;background: url(email-icon.png) left center no-repeat;}}

　　700 到 1000px：@media screen and (max-width: 1000px) and (min-width: 700px) { ul li a:before { content: "Email: "; font-style: italic;color: #666666; }}

　　大于 1001px：@media screen and (min-width: 1001px) {ul li a:after {content: " (" attr(data-email) ")";font-size: 12px;font-style: italic;color: #666666;}}

　　代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- <link rel="stylesheet" type="text/css"media="(max-width:1000px)and(min-width:700px)"href=""/>
		<link rel="stylesheet" type="text/css"media="(max-width:699px)and(min-width:300px)"href=""/> -->
		<style type="text/css">
			#aa{
				width: 100%;
				height: 70px;
				background-color: #008000;
			}
			.alist{
				width: 80px;
				height: 80px;
				border: 1px solid red;
				float: left;
				/* display: flex; */
			}
			p{
				display: none;
			}
			ul{
				list-style: none;
			}
			@media screen and (min-width: 1200px) {
				ul{
					font-size: 30px;
				}
			}
			@media screen and (max-width: 1199px) and (min-width: 900px) {
				ul{
					font-size: 26px;
				}
			}
			@media screen and (max-width: 899px)and (min-width: 620px) {
				ul{
					font-size: 20px;
				}
			}
			@media screen and (max-width: 619px)and (min-width: 320px) {
				ul{
					font-size:14px;
				}
			/* 	#aa{
					display: none;
				} */
				p{
					display: block;
					}
				.alist{
					background-color: #008000;
				}
			}
			@media screen and (max-width: 320px){
				ul{
					font-size:10px;
				}
				.alist{
					width: 100%;
					float: none;
				}
			}
		</style>
	</head>
	<body>
		<div id="aa">
			<div class="alist">1</div>
			<div class="alist">2</div>
			<div class="alist">3</div>
			<p>我是一开始隐藏的</p>
			<ul>
				<li>我是一开始我是一开始我是一开始</li>
				<li>我是一开始我是一开始我是一开始</li>
				<li>我是一开始我是一开始我是一开始</li>
				<li>我是一开始我是一开始我是一开始</li>
				<li>我是一开始我是一开始我是一开始</li>
				<li>我是一开始我是一开始我是一开始</li>
			</ul>
		</div>
	</body>
</html>

CSS3 学习笔记（动画 多媒体查询）

猜你喜欢

CSS3 学习笔记（动画多媒体查询）