一、动画animation:
使用之前需要先设置一个@keyframes 自取名字 { 0%{ } 30%{ } 100%{ } } 如下代码:
.box{
width: 200px;
height: 200px;
background-color: aqua;
animation: donghua 4s ease-out infinite alternate 0s ;
}
/*@-webkit-keyframes donghua 为兼容谷歌浏览器*/
/*@-moz-keyframes donghua 为兼容火狐浏览器*/
@keyframes donghua {
0%{
}
30%{
}
100%{
}
}
动画的使用过程
动画的播放方向(animation-direction)
normal,动画每次都是循环向前播放
alternate,动画播放为偶数次则向前播放
动画的播放次数(animation-iteration-count)值通常为整数,默认值为1
特殊值infinite,表示动画无限次播放
移动端
头部meat标签的使用
<!-- 适配移动端的时候必须要加上视口标签 -->
<!-- viewport视口 width=device-widht宽度等于设备宽度 initial-scale=1.0初始化不缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
一、移动端的使用单位
移动端的使用单位rem:
1.rem是相对根元素(html)来设置的
2.1rem就相当于是根元素原大小,如果根元素没设置大小那么1rem就默认等于16px
移动端使用单位em特点:
- em的值并不是固定的
- em会继承父级元素的字体大小
二、媒体查询
1.@media screen 的运用:在引入专门写它的css链接时,链接可以写在body的下方
/*500-700 包括500和700像素的时候显示如下样式*/
@media screen and (max-width:700px) and (main-width:500px ) {
background-color:yellow;
}
/*only screen 代表电脑、手机等设备 all代表全部 */