动画
| 动画代码 | 用法 |
|---|---|
| animation-name: myframe2 | 引入动画 |
| animation-duration: 2s | 动画时间 |
| animation-delay: 5s | 延时时间 |
| animation-iteration-count: 10 | 动画播放次数（Infinite无限次） |
| animation-direction: alternate | 动画在下一个是否逆向播放 |
| animation-fill-mode:backwards(最后位置forwards;初始位置backwards) | 动画结束位置 |
<style>
.div1{
width: 100px;
height: 100px;
background: red;
animation-name: myframe2;
animation-duration: 2s;
animation-delay: 5s;
animation-iteration-count: 10;
animation-direction: alternate;
animation-fill-mode:backwards;
}
@keyframes myframe {
from{
}
to{
background: green;
margin-left: 300px;
}
}
@keyframes myframe2 {
0%{
}
25%{
margin-left: 300px;
margin-top: 0px;
}
50%{
margin-left: 300px;
margin-top: 300px;
}
100%{
margin-top: 300px;
margin-left: 0px;
}
}
</style>
</head>
<body>
<div class="div1"></div>
</body>
响应式布局
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no"/>
<meta name="format-detection" content="telephone=no,email=no"/>
<link rel="stylesheet" href="maincss.css"/>
<link rel="stylesheet" href="computer.css" media="screen and (max-width:1000px)"/>
<link rel="stylesheet" href="mobile.css" media="screen and (min-width:1000px)"/>
一 、在style中引入两种css文件
<link rel="stylesheet" href="computer.css" media="screen and (max-width:1000px)"/>
<link rel="stylesheet" href="mobile.css" media="screen and (min-width:1000px)"/>
<link rel="stylesheet" href="maincss.css"/>
二、创建一个新的css文件
@import url( "mobile.css") screen and (max-width: 1000px);
@import url("computer.css") screen and (min-width: 1000px);
三、对需要响应式布局的对象进行操作
@media screen and (min-width: 480px) and (max-width:1000px) {
.div1{
background-color: orange;
height:250px;
}
}