transition transform 0.5s
transition主要包含四个属性值
- 执行变换的属性:transition-property
- 变换延续的时间:transition-duration
- 在延续时间段,
- 变换的速率变化transition-timing-function
- 变换延迟时间transition-delay。
<style lang="stylus" scoped>
.imgitem
position static
width 100%
height 100%
transition transform 0.5s
</style>
css3 transform
旋转、缩放、移动或倾斜
scaleX(1.1) 通过设置 X 轴的值来定义缩放转换。
scaleY(0.5) 通过设置 Y 轴的值来定义缩放转换。
视口自适应
在桌面端,视口指的是在桌面端,指的是浏览器的可视区域
而在移动端较为复杂,它涉及到三个视口
分别是 Layout Viewport(布局视口)、 Visual Viewport(视觉视口)、Ideal Viewport。
<style lang="scss" scoped>
//纯CSS3使用vw和vh视口单位实现自适应
// rem 单位换算:定为 75px 只是方便运算,750px-75px、640-64px、1080px-108px,如此类推
$vm_fontsize: 75; // iPhone 6尺寸的根元素大小基准值
@function rem($px) {
@return ($px / $vm_fontsize ) * 1rem;
}
// body 也增加最大最小宽度限制,避免默认100%宽度的 block 元素跟随 body 而过大过小
body