![[抠鼻]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_39.5b41924.png)
![[微笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_1.7d9f699.png)
![[看]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_97.39cdc9f.png)
![[呲牙]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_2.cd1e2bd.png)
![[困]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_24.6e6570b.png)
一只大菜鸡
喝水都长肉╭(╯^╰)╮
获得徽章 0
- #每日一题# css3动画
c3动画的三个属性:transform,transition,animation;
1.transform: 描述静态样式，本身无动画效果，可对元素进行 旋转（rotate）、扭曲（skew）、缩放（scale）、移动（translate）及矩阵变形（matrix）.
2.transition 过渡，从一种效果变成另一种效果。只有开始结束两种状态。往往需要一个事件来触发，无法在加载时自动发生。如：
div{
transtion:transform 2s;//过渡的属性 过渡的时间
}
div:hover{
transform: rotate(180deg);
}
3.animation
类似逐帧动画，可设置每一帧的样式和时间，transition只能设置头尾。transition常与hover等事件配合使用，而animation是可以自发的
例：div{
background-color: yellow;
animation: 1s test;
}
@keyframes test{
30%{background-color: red;}
60%{background-color: blue;}
100%{background-color: green;}
}展开评论点赞 - #每日一题# 移动端适配
1.meta viewport
浏览器视口一般默认为布局视口（网页布局的区域），手机访问时，如不留白，里面的东西会缩小；如正常大小，则只能看到很小的一部分，需要滑动浏览。一般将视口宽度设为设备宽度。device-width:设备宽度，initial-scale:初始缩放比。如：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
2.rem
rem是相对根元素字体大小的单位，html的font-size=50px，则1rem=50px;这样我们只需改变根节点字体大小就能适配不同尺寸设备。常用： 设备宽度/设计稿 * 根节点字体大小。如：
document.documentelement.style.fontSize = document.documentElement.clientWidth/750 *100 + 'px'。展开评论点赞
