css

115 阅读1分钟

aspect-ratio属性

设置元素的宽高比,这个属性可以确保元素在不同屏幕尺寸和容器大小下保持一定的宽高比,非常适用于响应式设计中。

基本语法:

// 16/9表示宽高比为16:9的矩形,1/1表示正方形
element{
  aspect-radio:16/9
}

动画

Transition

transition属性用来定义元素何时启动整个过渡的开始、结束状态,以及每个过渡属性的值变化规则。

Transition属性:
  • transition-property:transition控制哪个属性,默认all,可以是多个属性,用逗号分隔。

  • transition-duration:transition的持续时间,默认0,单位为秒(s)或者毫秒(ms)。

  • transition-timing-function:设置transition的速度曲线,默认ease渐进。可以是linear线性,ease渐进,ease-in加速,ease-out减速等。

  • transition-delay:控制transition何时开始(延迟),默认0,单位为秒(s)或者毫秒(ms)。

简写: transition: transition-property transition-duration transition-timing-function transition-delay;

Animations

from&to

from属性可以设置起始样式,to则是设置结束样式,from和to都可以单独设置。我们把整个动画拆分成多个帧,第一帧的效果就是from,最后一帧就是to。

百分比百分百的写法可以理解为将一个动画分为多个关键点