速查笔记——CSS3篇

选择器

奇偶项选择：.item:nth-child(odd/even)

选择前x项：.item:nth-child(-n + 2)

选择后x项：.item:nth-last-child(-n + 2)

下一项：.item + .item

后面所有项：.item ~ .box

渐变

渐变模拟线型

/* 实线 */
background-size: 100px auto;
background-image: linear-gradient(90deg, #000,#000);
/* 长划线 */
background-size: 12px auto;
background-image: linear-gradient(90deg, #000 70%, transparent 70%);
/* 短划线 */
background-size: 7px auto;
background-image: linear-gradient(90deg, #000 60%, transparent 60%);
/* 圆点 */
background-size: 4px auto;
background-image: linear-gradient(90deg, #000 70%, transparent 70%);
/* 方点 */
background-size: 2px auto;
background-image: linear-gradient(90deg, #000 50%,transparent 50%);
/* 划线-点 */
background-size: 2px auto;
background-image: linear-gradient(90deg, #000 40%, transparent 40%, transparent 65%, #000 65%, #000 75%, transparent 75%);
/* 长划线-点-点 */
background-size: 2px auto;
background-image: linear-gradient(90deg, #000 45%, transparent 45%, transparent 60%, #000 60%, #000 65%, transparent 65%, transparent 80%, #000 80%, #000 85%, transparent 85%);

Flex

flex属性

对 flex-grow flex-shrink flex-basis 属性缩写

flex-basis：内容基础空间占位，相当于指定宽/高；默认 auto；

flex-shrink：内容缩小空间占位，默认 1；

flex-grow：内容放大空间占位，默认 0；

flex宽度/高度

默认 flex: 1 下，元素宽度/高度有效存在；

多层 flex: 1 下，需父层 height: 0 生成有效宽度/高度，子层 heigt: 100% 继承有效宽度/高度；

内容撑开的 flex 元素，需设置 display: inline-flex；且内容块 flex-shrink: 1 保持有效宽度/高度；

布局

预览图片

在容器内原比例预览图片

.box{
  width: 240px;
  height: 240px;
  line-height: 240px;
  text-align: center;
}
.box img{
  max-width: 100%;
  max-height: 100%;
}

列表内容

容器固定宽，内容块固定宽固定数量，边距固定（常见mobile）

.container {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
  height: 250px;
  justify-content: space-between;
  align-content: space-between;
  background-color: blue;
}

注：边距合大于单个内容块宽度情况不适用，需手动设置边距 .item:not(:nth-child(4n)){ margin-right: 100px }

容器不固定宽，内容块不固定宽，固定数量，不固定边距

.container {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
  height: 250px;
  justify-content: space-between;
  align-content: space-between;
  background-color: blue;
}
.container .item {
  width: 24%;
  height: 120px;
  background-color: pink;
}

如图： 容器宽度变化，内容块宽与边距按比例改变

容器固定宽，内容块固定宽不固定数量，边距固定（依次排列）

.container{
  width: 510px;
  background-color: blue;
}
.list{
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
  margin-bottom: -10px;
}
.container .item{
  width: 120px;
  height: 120px;
  background-color: pink;
  margin-right: 10px;
  margin-bottom: 10px;
}

类比： 父容器 margin 负值 + 内容块空间

容器不固定宽，内容块固定宽不固定数量，边距不固定

.container {
  width: 520px;
  display: grid;
  grid-auto-rows: 120px;  // 内容块高
  grid-template-columns: repeat(auto-fill, 120px);  // 内容块宽
  grid-row-gap: 10px;  // 内容块纵向边距
  grid-column-gap: 10px;  // 内容块横向边距
  justify-content: space-between;
  background-color: blue;
}

容器不固定宽，内容块不固定宽不固定数量，边距不固定

.container {
  width: 600px;
  background-color: blue;
}
.list {
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px; // 最小边距
  margin-bottom: -10px;
  justify-content: space-between;
}
.list::after{
  content: '';
  margin-right: auto;
}
.container .item{
  height: 80px;
  margin-right: 10px; // 最小边距
  margin-bottom: 10px;
  background-color: pink;
}

transform

css3实现正方体

.aqual{
  position: relative;
  height: 100%;
  margin: 0 auto;
  transform-style: preserve-3d;         // 支持3d
  perspective-origin: center center;
  transform: translateZ(400px) rotateY(0deg);   // 中心点偏移
  transition: transform .6s ease-out;
}

.page:first-child{
  transform: rotateY(-180deg) translateZ(-400px);   // 面的旋转与展开
}
.page:nth-child(2){
  transform: rotateY(90deg) translateZ(-400px);
}
.page:nth-child(3){
  transform: rotateY(0deg) translateZ(-400px);
}
.page:nth-child(4){
  transform: rotateY(-90deg) translateZ(-400px);
}

缩放定位元素

absolute + translate + scale

transform: translate(-50%, -50%) scale(2);
top: 676 + @height / 2;
left: 424 + @width / 2;

问题

rotate元素层级问题

描述：具有 transform:rotate 元素在旋转动画层级变高解决：为被覆盖的上层元素添加 transform:translateZ(0) 或position:relative

动画

transition

css过渡，即稳定状态下数值改变；

要求起始状态存在初始数值，display background-image 等非数值属性不支持过渡；

渐入与渐出

// 渐入渐出
div {
  opacity: 0;
  transition: opacity 300ms;
  &:hover {
    opacity: 1;
  } 
}
// 渐入不渐出
div {
  opacity: 0;
  &:hover {
    opacity: 1;
    transition: opacity 300ms; 
  }
}
// 渐出不渐入
div {
  opacity: 0;
  transition: opacity 300ms; 
  &:hover {
    opacity: 1;
    transition: none; 
  }
}

animation

animation-timing-function

在各时间从帧序列取出帧执行的规则

steps跳帧执行

steps(n,start) 立即开始, 忽略起始帧，起于第二帧向后到最后一帧结束
steps(n,end) 立即结束, 忽略结束帧，起于第一帧向后到倒数第二帧结束(默认steps值)
step-start等价于steps(1, start)
step-end等价于steps(1,end)

步是灵活执行的，当过渡值大于步，按过渡值为步

步数： steps值

过渡值： 过渡范围

进度： 进度百分比

步数为过渡值和进度值服务

声明过渡值：过渡属性起点至终点即过渡值（关键）
计算步数：确定的步数值能通过对进度值计算，分割过渡值转换为帧
检查动画，是否需要补帧（循环时），是否需要调整为steps(start,n)，是否需要animation-fill-mode

补帧：steps步数不变时，单帧比例（100/帧数）位置插入所补帧

总结：

// 循环的动画 n即帧数
.box{
  background-position-x: 0%;
  animation: ani Xs steps(n) 1s infinite;
}
@keyframes ani {
  0% {
    background-position-x: 0%;
  }
  // 单帧比例 * 帧数
  75% {
    background-position-x: 100%;
  }
  100% {
    background-position-x: 100%;
  }
}

// 单次动画
.box{
  background-position-x: 0%;
  animation: ani 2s steps(3, start) 1s forwards;
}
@keyframes ani {
  0% {
    background-position-x: 0%;
  }
  100% {
    background-position-x: 100%;
  }
}

animation-play-state

动画状态，值为 running 或 paused；

通过控制 animation-play-state 实现动画的暂停与播放

animation-fill-mode

动画样式在动画执行前与完成后分别是否作用于元素；

none：默认动画执行前后都不作用动画样式

forward：动画执行后将动画结束样式作用于元素

backward：动画执行前将动画开始样式作用于元素

both：动画执行前后动画样式都作用于元素

@frameskey animate-name

动画帧序列，声明进度值与过渡值

案例

走马灯

<div class="wrap" style="overflow: hidden;">
  <div class="container d-inline-flex">
    <div class="item">item1</div>
    <div class="item">item2</div>
    ......
    <div class="item">item1</div>
    <div class="item">item2</div>
    ......
  </div>
</div>

.container {
  animation: loop-translate 9s linear infinite;
  @keyframes loop-translate {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(-50%);
    }
  }
}

自动循环轮播

<div class="wrap" style="height: 100%; overflow: hidden;">
  <div class="container">
    <div class="item">item1</div>
    <div class="item">item2</div>
    <div class="item">item3</div>
    <div class="item">item4</div>
    <div class="item">item1</div>
  </div>
</div>

.container {
  animation: vertical-swiper 6s ease infinite; 
  @keyframes vertical-swiper {
    0% {
      transform: translateY(0%);
    }
    12.5% {
      transform: translateY(-20%);
    }
    25% {
      transform: translateY(-20%);
    }
    37.5% {
      transform: translateY(-40%);
    }
    50% {
      transform: translateY(-40%);
    }
    62.5% {
      transform: translateY(-60%);
    }
    75% {
      transform: translateY(-60%);
    }
    87.5% {
      transform: translateY(-80%);
    }
    100% {
      transform: translateY(-80%);
    }
  }

// steps方式
.container {
  animation: vertical-swiper 4s steps(4) infinite;
  @keyframes vertical-swiper {
    0% {
      transform: translateY(0%);
    }
    100% {
      transform: translateY(-80%);
    }
  }
}

问题

ios系统transition卡顿

transition动画添加延迟 delay 时间；

移动端帧图过大导致动画卡顿

延迟动画或在页面进入时第一次渲染帧图，而不是播放动画时

.preload-frame {
  position: absolute;
  bottom: 0;
  z-index: -99;
  width: 750px;
  height: 1px;
  background-image: url("@/assets/img/frame1.png"), url("@/assets/img/frame2.png");
  background-size: auto 800px;
  background-repeat: no-repeat;
}

适配

移动端

等比缩放（更大的屏幕展示更大的内容）

通过rem、vw/百分比实现不同屏幕下等比缩放页面内容

伸缩布局（更大的屏幕展示更多的内容）

通过flex实现容器的伸缩，内容大小不变

容器宽度：按比例分布，相关属性flex-basis、flex-shrink、flex-grow，width: 48%
min-width（内容展示所需最小宽）、max-width（宽度过大时仅边距改变）
自适应边距 space-between，space-around

PC端

伸缩布局

与移动端伸缩一致

页面的min-width：设置页面宽最小值(1200)，小于时滚动

媒体查询

为小屏或大屏下附加媒体查询，改变展示内容大小（版芯大小）

全设备

媒体查询小/中/大屏设备，改变内容结构与大小

问题

border-radius: 50% 无法实现圆形

描述：元素宽高为rem单位时；解决：使用其它单位设置元素宽高；

CSS3新技巧帮助我们更好开发优美的网页

选择器

渐变