CSS进阶

CSS进阶

360前端星计划-第四课
主讲：赵文博老师

transform 变形

• 对元素进行平移、旋转、缩放、倾斜
  translate（百分比单位是相对于盒子自身的宽度或高度元）
  rotate旋转（单位deg、正值顺时针旋转、默认的中心是自身的中心）修改中心点transform-origin（例transform-origin：left bottom）
  scale缩放（数值是原宽度高度倍数）
  skew
• transform 不会对其它元素布局产生影响

transform:translate(50px,50px) rotate(30deg) scale(2)	=>书写顺序影响转换效果		

• 3D转换：X（水平向右，右为正左为负）,Y（垂直向下，上为负下为正）,Z轴（垂直屏幕，外为正内为负）：
  translate3d(x,y,z) 3D位移
  rotateX(x)rotateY(y)rotateZ(z) 3D旋转
  perspective 透视（3D必备，单位px，近大远小，写在被观察对象的父盒子上）
  transform-style 3D呈现，控制子元素是否开启3D空间，默认flat不开启，开启preserve-3d。写在父盒子上

transition 过渡

• 指定从一个状态到另一个状态时如何过渡
• 动画的意义：告诉用户发生了什么
  transition 属性
  transition-property
  transition-duration
  transition-timing-function
  transition-delay
• transition-timing-function

animation 动画

• 可以实现更复杂的样式变化效果
• 使用方法
  定义关键帧样式
  应用动画到元素上
• animation 属性：通过设置节点来控制一个或一组动画
  animation-name：动画名称
  animation-duration：持续时间
  animation-timing-function：规定动画的速度曲线，默认是ease（慢-快-慢）linear（匀速）ease-in（快） ease-out（慢）ease-in-out（快-慢）steps（指定了时间函数中的步长）
  animation-delay：动画延迟多久开始
  animation-iteration-count：动画重复次数，默认一次
  animation-direction

1.定义动画：@keyframes 动画名称{   
                           /*0%/from开始状态100%/to结束状态*/
                            0%{}
                            25%{}
                            100%{}
                            }
          2.调用动画：div{
                          animation-name：动画名称
                          animation-duration：持续时间
                        }
                        

何为响应式设计？

同一个页面可以适应不同屏幕大小设备的设计方案

• 设置 viewport

<meta name="viewport"
  content="width=device-width, initial-scale=1.0">

• 图片尺寸设置

<img
  src="/assets/image.jpg"
  alt="landscape"
/>

<style>
  img {
    max-width: 100%;
  }
</style>

• 背景图片

background-size: cover
background-size: contain

• media query
  针对不同的屏幕尺寸，应用不同的样式

@media screen and (min-width: 480px) {
  .box {
    font-size: 16px;
  }
}

可以查询的 media： width / height 、device-width / device-height 、device-pixel-ratio、orientation

• 使用不同尺寸的图片

<img srcset="/img/large.jpg  1200w,
             /img/normal.jpg 800w,
             /img/small.jpg  400w"
     sizes="(max-width: 320px) 400px,
            (max-width: 640px) 800px,
            1200px"
     src="/img/normal.jpg"
     alt="description of the image">