動畫+響應式佈局
阿新 • • 發佈：2018-12-18
動畫
| 動畫程式碼 | 用法 |
|---|---|
| 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;
}
}