一、CSS动画
1.过渡
过渡 (transition) :通过过渡可以指定一个属性发生变化的方式。通过过渡可以创建一些非常好的效果,提升用户的体验。
属性 | 描述 |
---|---|
transition-property | 指定要执行过渡的属性,多个属性间逗号隔开,如果所有属性都需要过渡,则用 all 关键字。大部分属性都支持过渡,注意过渡必须从一个有效值向另一个有效值进行 |
transition-duration | 指定过渡效果的持续时间,单位 s 和 ms,可以分别指定,用逗号隔开 |
transition-timing-function | 过渡的时序函数,指定过渡的执行方式。1.ease 默认值,慢速开始,先加速,再减速 2.linear 匀速运动 3.ease-in 加速运动 4.ease-out 减速运动 5.ease-in-out 先加速后减速 6.cubic-bezier() 来指定时序函数 https://cubic-bezier.com 7.stes 分步执行过渡效果 可以指定一个第二个值: end (默认值)在时间结束时执行过渡 start 在时间开始时执行过渡 |
transition-delay | 过渡效果的延迟,等待一段时间后再执行过渡 |
transition | 可以同时设置过渡相关的所有属性,只有一个要求,如果要写延迟,则两个时间中第一个写持续时间第二个写延迟时间 |
2.动画
动画:动画和过渡类似,都是可以实现一些动态的效果,不同的是过渡需要在某个属性发生变化时才会触发,动画可以自动触发动态效果。
关键帧:设置动画效果,必须要先设置一个关键帧,关键帧设置了动画执行的每一个步骤。
@keyframes test { /* 设置一个名字为 test 的关键帧 */
/* from 表示动画的开始位置,也可以使用 0% */
from { margin-left: 0;}
/* to 表示动画的结束位置,也可以使用 100% */
to { margin-left: 700px;}
}
/* 可以在 0% 到 100% 间再任意设置多个关键帧 */
属性 | 描述 |
---|---|
animation-name | 要对当前元素生效的关键帧的名字 |
animation-duration | 动画的执行时间 |
animation-timing-function | 动画的时序函数 |
animation-iteration-count | 动画执行的次数 可选值:代表次数的数值 / infinite 无限执行 |
animation-delay | 动画的延时 |
animation-direction | 指定动画运行的方向 可选值:1.normal 默认值 从 from 向 to 运行 每次都是这样 2.reverse 从 to 向 from 运行 每次都是这样 3.alternate 从 from 向 to 运行 重复执行动画时反向执行 4.alternate-reverse 从 to 向 from 运行 重复执行动画时反向执行。 |
3.变形
变形:变形就是指通过 CSS 来改变元素的形状或位置,变形不会影响到页面的布局。transform 用来设置元素的变形效果。
平移 | translateX()沿着 x 轴方向平移,translateY()沿着 y 轴方向平移,translateZ()沿着 z 轴方向平移。平移元素的百分比是相对于自身计算的。z 轴平移,调整元素在 z 轴的位置,正常情况就是调整元素和人眼之间的距离,距离越大,元素离人越近。z 轴平移属于立体效果,默认情况下网页不支持透视,如果需要看见效果必须要设置网页的视距。 |
旋转 | rolateX()rolateY()rolateZ()通过旋转可以使元素沿着 x y 或 z 旋转指定的角度 单位有 deg turn。旋转可以设置 backface-visibility 属性决定是否显示背面 visible / hidden |
缩放 | scaleX()水平方向的缩放 scaleY()垂直方向的缩放 scale()双方向的缩放 transform-origin 用于设置变形的原点,默认值 center |
二、less简介
less:less是一门 css 的预处理语言。less 是 css 的一个增强版,通过 less 可以编写更少的代码实现更强大的功能。less 的语法大体上和 css 一致,但是添加了许多对 css 的拓展。less 可以直接在父元素的大括号中为子元素添加样式。
- less变量的语法:@变量名。使用变量时,如果是直接使用则以 @变量名 的形式使用即可。作为类名,或者是一部份值使用时必须以 @{变量名} 的形式使用。
- 变量发生重名时,会优先使用比较近的变量。
- height : $width 可以直接为 height 引用 width 的值
- & 符用于表示外层的父元素
- : extend () 对当前选择器扩展指定选择器的样式(选择器分组)
- .类名 () 直接对指定的样式进行引用,这里就相当于将样式进行了复制
- 使用类选择器时可以在选择器后边添加一个括号,这是我们实际上就创建了一个 mixins(专门用来给别的元素引用
- 混合函数 在函数中可以直接设置变量
- 在 less 中所有的数值都可以直接进行计算
- 通过 @import "XXXX.less" 可以把多个 less 文件进行合并
.p1{ width: 100px; height: 200px;}
.p2:extend(.p1){ color: red;} //p2的样式为在p1的基础上扩展
.p3{ .p1();} //复制p1的样式到p3
.p4(){ width: 100px; height: 100px;} //创建一个只用于被引用的元素样式
.p5(@w,@h){ width: @w; height: @h;}
.p6{ .p5(200px,200px);} //调用混合函数,按顺序传递参数
三、CSS弹性盒
弹性盒 (flex): 是CSS中的又一种布局手段,它主要用来代替浮动完成页面的布局。flex 可以使元素具有弹性,让元素可以跟随页面大小的改变而改变。
弹性容器:要使用弹性盒,必须先讲一个元素设置为弹性容器。我们通过 display 来设置弹性容器。display:flex 设置为块级弹性容器 display:inline-flex 设置为行内的弹性容器。
弹性元素:弹性容器的直接子元素是弹性元素(弹性项)一个元素可以同时是弹性元素和弹性容器
弹性容器的属性 | 描述 |
---|---|
flex-direction | 指定容器中元素的排列方式。可选值:row 默认值,弹性元素在容器中水平排列(左向右 主轴)row-reverse 弹性元素在容器中反向水平排列(右向左)column 弹性元素纵向排列(自上向下)column-reverse 弹性元素方向纵向排列(自下向上)弹性元素的排列方向称为主轴,与主轴垂直方向的称为侧轴。 |
flex-wrap | 设置弹性元素是否在弹性容器中自动换行。可选值:nowrap 默认值,元素不会自动换行 wrap 元素沿着辅轴方向自动换行 wrap-reverse 元素沿着辅轴反方向换行 |
flex-flow | wrap 和 direction 的简写属性 可以同时设置两个属性 |
justify-content | 如何分配主轴上的空白空间(主轴上的元素如何排列)可选值:flex-start 元素沿着主轴起边排列 flex-end 元素沿着主轴终边排列 center 元素居中排列 space-around 空白分布到元素两侧 space-between 空白均匀分布到元素间 space-evenly 空白分布到元素的单侧 |
align-content | 辅轴空白空间的分布 |
align-items | 元素在辅轴上如何对齐,元素间的关系。可选值:stretch 默认值,将元素的长度设置为相同的值 flex-start 元素不会拉伸,沿着辅轴起边对齐 flex-end 沿着辅轴的终边对齐 center 居中对齐 baseline 基线对齐 |
align-self | 用来覆盖当前弹性元素上的 align-items 为当前元素单独设置 |
弹性元素的属性 | 描述 |
---|---|
flex-grow | 指定弹性元素的伸展的系数。当父元素有多余的空间时,子元素如何伸展。父元素的剩余空间,会按照比例进行分配。 |
flex-shrink | 指定弹性元素的收缩系数。当父元素中的空间不足以容纳所有的子元素时,如何对子元素进行收缩。缩减多少是根据缩减系数和元素大小来计算的 |
flex-basis | 指定的是元素在主轴上的基础长度。如果主轴是横向的,则该值指定的就是元素的宽度。如果主轴是纵向的,则该值指定的就是元素的高度。默认值是 auto,表示参考元素自身的高度或宽度。如果传递了一个具体的数值,则以该值为准。 |
flex | 可以设置弹性元素所有的三个样式 flex:增长 缩减 基础 可选值:initial“flex:0 1 auto” / auto“flex:1 1 auto” / none“flex:0 0 auto”弹性元素没有弹性 |
order | 决定弹性元素的排列顺序 |
四、移动端页面
1.像素
- 屏幕是由一个一个发光的小点构成的,这一个个的小点就是像素
- 分辨率:1920 × 1080 说的就是屏幕中小点的数量
- 在前端开发中像素要分两种情况讨论:CSS 像素和物理像素
- 物理像素:上述所说的小点点就属于物理像素
- CSS 像素:编写网页时,我们所用的像素都是 CSS 像素
- 浏览器在显示网页时,需要将 CSS 像素转换为物理像素然后再呈现。一个 CSS 像素最终由几个物理像素显示,由浏览器决定:默认情况下在pc端,一个 CSS 像素 = 一个物理像素
2.视口(viewport)
- 视口就是屏幕中用来显示网页的区域
- 可以通过查看视口的大小,来观察 CSS 像素 和物理像素的比值
- 默认情况下:视口宽度 1920px(CSS像素)1920px(物理像素)此时像素比是 1:1
- 放大两倍的情况:视口宽度 960px(CSS像素)1920px(物理像素)此时像素比是 1:2
- 我们可以通过改变视口的大小,来改变 CSS 像素和物理像素的比值
3.手机像素
- 在不同的屏幕下,单位像素的大小是不同的,像素越小屏幕会越清晰。
- 智能手机的像素点远远小于计算机的像素点
- 默认情况下,移动端的页面都会将视口设置为980像素(CSS像素)以确保pc端网页可以在移动端正常访问,但是如果网页的宽度超过了980,移动端的浏览器会自动对网页缩放以完整显示网页
- https://material.io/resources/devices/
- 所以基本大部分的pc端网站都可以在移动端中正常浏览,但是往往不会有一个很好的体验,为了解决这个问题,大部分网站都会专门为移动端设计网页
- 每一款移动设备设计时,都会有一个最佳的像素比,一般我们只需要将像素比设置为该值就可以得到一个最佳效果。将像素比设置为最佳像素比的视口大小我们称其为完美视口
- 将网页的视口设置为完美视口 <meta name="viewport" content="width=device-width,initial-scale=1.0">
4.vw单位
- 由于不同设备视口和像素比不同,所以在移动端开发时,就不能再用 px 来进行布局了
- vx 表示的是视口的宽度(viewport width)
- 100vw = 一个视口的宽度 1vw = 1%视口的宽度 vw 这个单位永远相当于视口宽度进行计算
- 移动端网页设计图的宽度通常为 750px 1125px
- 需要知晓设计图上元素在移动端的大小要换算 vw 单位
- vw 适配方案:设置 html 根标签的 font-size 为 1px 所换算的 vw 的整数倍 然后通过 rem 单位换算来设置元素的大小
5.媒体查询
- 响应式布局:网页可以根据不同的设备或窗口大小呈现出不同的效果
- 使用响应式布局,可以使一个网页适用于所有设备
- 响应式布局的关键就是媒体查询。通过媒体查询可以为不同的设备,或设备不同状态来分别设置样式
- 媒体查询语法:@media 查询规则 {} 媒体类型:all 所有设备 print 打印设备 screen 带屏幕的设备 speech 屏幕阅读器 可以使用逗号连接多个媒体类型
- 可以在媒体类型前加 only 表示只有,这主要是为了兼容老版本浏览器
- 媒体特性:width 视口的宽度 height 视口的高度 min-width 视口的最小宽度(视口大于指定宽度时生效)max-width 视口的最大宽度(视口小于指定宽度时生效)
- 例:@media(max-width:500px){ body {background-color:#bfa } }
- 多个媒体特性之间可以用 and 逗号 only not 连接
- 样式切换的分界点,我们称其为断点,也就是网页的样式会在这个点时发生变化,一般常用断点:小于768 超小屏幕 max-width=768px 大于768 小屏幕 min-width=768px 大于992 中型屏幕 min-width=992px 大于1200 大屏幕 min-width=1200px