动画
动画代码 用法
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
响应式布局
<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)"/>
1
2
3
4
5
6
7
一 、在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"/>
1
2
3
二、创建一个新的css文件
@import url( "mobile.css") screen and (max-width: 1000px);
@import url("computer.css") screen and (min-width: 1000px);
1
2
三、对需要响应式布局的对象进行操作
@media screen and (min-width: 480px) and (max-width:1000px) {
.div1{
background-color: orange;
height:250px;
}
}
---------------------
作者：Mode Cheng
来源：CSDN
原文：blog.csdn.net/weixin_4388…
版权声明：本文为博主原创文章，转载请附上博文链接！
