动画
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>