Bootstrap 中的动画和图形效果
圆⾓
现在，所有现代浏览器都⽀持不带⼚商前缀的
border-radius
属性了。有鉴于此，我们没有提供
.border-radius()
mixin，但是，Bootstrap does 提供了⽤于快速设置同⼀侧圆⾓的 mixin 。
复制.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
rotate属性}
.
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; @) { -webkit-transform: scale(@ratio,
@ratio-y); -ms-transform: scale(@ratio, @ratio-y); // IE9 only transform: scale(@ratio, @ratio-y); } .tr
anslate(@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
github/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: @c
olor; } // 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; 达到⽬的。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论