Bootstrap中的动画和图形效果

 

圆角

现在，所有现代浏览器都支持不带厂商前缀的 

border-radius

 属性了。有鉴于此，我们没有提供 

.border-radius()

mixin，但是，Bootstrap does 提供了用于快速设置同一侧圆角的 mixin 。

复制

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

Box (Drop) 隐形

如果你的目标用户使用的是最新版本和更高级的浏览器和设备，只需单独使用 

box-shadow

 属性即可。如果你需要兼容较老的 Android (低于 v4) 和 iOS 设备 (低于 iOS 5)，可以使用下面这个  不建议使用 的 mixin，便于帮你添加 

-webkit

 前缀。

由于 Bootstrap 并未官方提供对过时（不支持标准属性）平台的支持，此 mixin 从 v3.1.0 版本期就 不建议使用 了。为了保持向后兼容，Bootstrap 将继续在内部使用此 mixin， 直到 Bootstrap v4。

在设置 box 阴影时务必使用 

rgba()

 颜色，这样可以使他们尽可能地与背景无缝融入。

复制

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

过渡效果

有多个 mixin 供你灵活使用。可以一次性设置所有的过渡效果的属性，或者根据需要只是指定延时和持续时间。

此 mixin 从 v3.2.0 版本开始就被列为 不建议使用 了，取而代之的是使用 Autoprefixer。为了保持向后兼容，在 v4 版本之前，Bootstrap 将在内部继续使用这些 mixin。

复制

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

变形

旋转、缩放、平移（移动）或倾斜任何对象。

此 mixin 从 v3.2.0 版本开始就被列为 不建议使用 了，取而代之的是使用 Autoprefixer。为了保持向后兼容，在 v4 版本之前，Bootstrap 将在内部继续使用这些 mixin。

复制

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9 
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

动画

仅适用一个 mixin 就可以在一个声明中使用所有 CSS3 所提供的动画属性，其他 mixin 用于设置单个属性。

T此 mixin 从 v3.2.0 版本开始就 不建议使用 了，取而代之的是使用 Autoprefixer。为了保持向后兼容，在 v4 版本之前，Bootstrap 将在内部继续使用这些 mixin。

复制

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

透明度

为所有浏览器设置透明度，并为IE8提供 

filter

 备用滤镜。

复制

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

占位符文本

为表单控件中每个文本域提供占位符（Placeholder）文本的颜色。

复制

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10 
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

列

通过CSS在一个单独的元素中生成列。

复制

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

渐变

便于把任何两种颜色变成背景渐变色。想要使他更高级些，可以设置一个direction（方向），使用三种颜色，也可以使用径向（radial）渐变。使用一个mixin（混入），你就可以得到所有需要的前缀语法。

复制

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

你也可以为标准的里两颜色线性渐变指定角度：

复制

#gradient > .directional(#333; #000; 45deg);

如果你需要一个条纹风格的渐变，这也很容易。只要指定一个颜色，我们将该颜色半透明的条纹覆盖其上。

复制

#gradient > .striped(#333; 45deg);

再来试试三种颜色。利用此 mixin ，并为其设置第一种颜色、第二种颜色、第二种颜色的色标（例如 25%），还有第三种颜色：

复制

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

当心！ 如果你想删除某个渐变，确保将你所添加的针对 IE 的 

filter

 一并删除。你可以通过使用 

.reset-filter()

mixin 和 

background-image: none;

 达到目的。