CSS 选择器/动画

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

一.基本选择器

  • 通用元素选择器(*)

通用元素选择器,匹配任何元素;

  • 标签选择器(E)

匹配所有使用 E 标签的元素;

  • class选择器(.class)

匹配所有class属性中包含此class 的元素;

  • id选择器(#id)

匹配所有id属性为此id的元素

实例:

* { margin:0; padding:0; }

p { font-size:2em; }

.info { background:#ff0; }

p.info { background:#ff0; }

p.info.error { color:#900; font-weight:bold; }

#info { background:#ff0; }

p#info { background:#ff0; }

二.多元素选择器

  • 多元素选择器(E,F)

同时匹配所有的E元素和F元素,中间用逗号分隔.

  • 后代元素选择器(E F)

匹配所有属于 E 元素后代的F 元素,用空格分开.

  • 子元素选择器(E>F)

匹配所有的E元素的子元素F.

  • 毗邻元素选择器(E+F)

匹配所有紧随E元素之后的同级元素F.

实例:

div p { color:#f00; }

#nav li { display:inline; }

#nav a { font-weight:bold; }

div > strong { color:#f00; }

p + p { color:#f00; }

CSS 动画

CSS transition

transition 指定状态变化所需要的时间,例如:

img{
    height:15px;
    width:15px;
    transition: 1s;
}

img:hover{
    height: 450px;
    width: 450px;
}

这样可以指定图片的访达过程需要1s🐸.

还可以指定 transition 使用的属性,比如只适用于 height:

img{
    transition: 1s height;
}

这样只有高度变化需要1s 实现,其他变化依然瞬间实现.

transition-delay

img{
    transition: 1s height, 1s 1s width;
}

如上, width 在1s 以后才开始变化.

transition-timing-function

状态变化速度,默认不是匀速的,而是逐渐放慢,称为 ease.

img{
    transition: 1s ease;
}

除了 ease 以外,还包括:

  • linear 匀速
  • ease-in 加速
  • ease-out 减速
  • cubic-bezier 函数: 自定义速度模式

transition 的各项属性

完整写法:

img{
    transition: 1s 1s height ease;
}

单独定义:

img{
    transition-property: height;
    transition-duration: 1s;
    transition-delay: 1s;
    transition-timing-function: ease;
}

使用注意

  • 各大浏览器都支持无前缀的 transition;
  • 不是所有的属性都支持 transition;
  • transition 必须明确状态;

transition 的局限

  • 需要事件触发,无法在网页加载时自动生成;
  • 一次性,不能重发触发,除非一再触发;
  • 只能定义开始和结束状态,不能定义中间状态,即只有两个状态;
  • 一条 transition 只能定义一个属性的变化,不能涉及多个属性.

CSS animation

基本用法

首先, css animation 需要制定动画一个周期持续时间,以及动画效果的名称.

div:hover {
  animation: 1s rainbow;
}

上面代码表示，当鼠标悬停在div元素上时，会产生名为rainbow的动画效果，持续时间为1秒。为此，我们还需要用keyframes关键字，定义rainbow效果。

@keyframes rainbow {
  0% { background: #c00; }
  50% { background: orange; }
  100% { background: yellowgreen; }
}

上面代码表示，rainbow效果一共有三个状态，分别为起始（0%）、中点（50%）和结束（100%）。如果有需要，完全可以插入更多状态。

默认情况下，动画只播放一次。加入infinite关键字，可以让动画无限次播放。

默认情况下，动画只播放一次。加入infinite关键字，可以让动画无限次播放。

animation-fill-mode

动画结束以后，会立即从结束状态跳回到起始状态。如果想让动画保持在结束状态，需要使用animation-fill-mode属性。

  • none: 默认值,回到动画没开始的状态;
  • backwoards: 让动画回到第一帧的状态;
  • both: 根据 animation-direction 轮流应用 forwards 和 backwards 规则.

animation-direction

动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放。animation-direction属性，可以改变这种行为。

下面看一个例子，来说明如何使用animation-direction。假定有一个动画是这样定义的。

@keyframes rainbow {
  0% { background-color: yellow; }
  100% { background: blue; }
}

默认情况下, animation-direction 等于 normal.

此外，还可以等于取alternate、reverse、alternate-reverse等值。它们的含义见下图（假定动画连续播放三次）。

animation 的各项属性

div:hover {
  animation: 1s 1s rainbow linear 3 forwards normal;
}

单独的属性:

div:hover {
  animation-name: rainbow;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 1s;
    animation-fill-mode:forwards;
  animation-direction: normal;
  animation-iteration-count: 3;

}

keyframes 的写法

用于定义动画的各个状态:

@keyframes rainbow {
  0% { background: #c00 }
  50% { background: orange }
  100% { background: yellowgreen }
}

或者:

@keyframes rainbow {
  from { background: #c00 }
  50% { background: orange }
  to { background: yellowgreen }
}

如果省略某个状态，浏览器会自动推算中间状态，所以下面都是合法的写法。

@keyframes rainbow {
  50% { background: orange }
  to { background: yellowgreen }
}

@keyframes rainbow {
  to { background: yellowgreen }
}

甚至，可以把多个状态写在一行。

@keyframes pound {
  from，to { transform: none; }
  50% { transform: scale(1.2); }
}

另外一点需要注意的是，浏览器从一个状态向另一个状态过渡，是平滑过渡。steps函数可以实现分步过渡。

div:hover {
  animation: 1s rainbow infinite steps(10);
}

animation-play-state

如果想让动画保持突然终止时的状态，就要使用animation-play-state属性。

div {
    animation: spin 1s linear infinite;
    animation-play-state: paused;
}

div:hover {
  animation-play-state: running;
}
thank u !