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>