渐变和动画

渐变

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。使用 transition 即可。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点，必须规定两项内容：

  • 指定要添加效果的CSS属性
  • 指定效果的持续时间。

比如：我们需要在 .trans 宽度变化时使用渐变，耗时 2s，只需要声明

.trans {
  transition: width 2s;
  width: 200px;
}

然后当鼠标悬浮的时候让宽度从 200px 变为 300px

.trans:hover {
  width:300px;
}

如果我们需要添加多个样式的变换效果，添加的属性由逗号分隔：

.trans {
  transition: width 2s, height 2s, transform 2s;
}

其实，transition 属性是缩写属性，详细属性如下

属性 描述
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。

其中，transition-timing-function 可选值如下：

值 描述
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

我们可以使用渐变完成很多“动画”效果，如码蜂社官网的导航条。

动画

要创建CSS3动画，你将不得不了解 @keyframes 规则。 @keyframes 规则是创建动画。 @keyframes 规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

我们可以指定一个动画，将背景从红色变为黄色：

@keyframes animation-name
{
    from {background: red;}
    to {background: yellow;}
}

或者使用动画完成百分比声明：

@keyframes animation-name
{
    0% {background: red;}
    100% {background: yellow;}
}

我们可以使用百分比实现更细粒度的控制：

@keyframes animation-name
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

转换(transform)

为了实现动画效果，我们往往需要让目标平移，拉升或是旋转。transform 属性即可完成我们的需求。transform 与 position: relative 类似，不改变元素原先在文档流中的位置，只是视觉上显示位置发生改变。

translate

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

如下代码可以将一个 div 向右平移 50px，向下平移 100px

div {
  transform: translate(50px,100px)
}

rotate

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

如下代码可以将一个 div 旋转30度

div {
  transform: rotate(30deg);
}

scale

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数；

如下代码可以将一个 div 水平拉升到原来的 2 倍，垂直拉升到原来的 3 倍

div {
  transform:scale(2,3)
}

3D 转换

CSS3 允许对元素使用 3D 转换。

具体使用和参数与 2D 类似，详细可参考下表：

函数 描述
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

实战

完成以下 loading 图

results matching ""

    No results matching ""