收获坐标点,反射倒影的钻探观念

贰回贝塞尔曲线demo:

3次、1次贝塞尔曲线demo(演示+获取坐标点),贝塞尔demo

二回贝塞尔曲线demo:

 


 

See the Pen quadraticCurveDemo by hanyanjun (@hanyanjun) on CodePen.

我的demo地址(二次)

引入点击以上链接使用 


 

2次贝塞尔曲线demo:

 


 

See the Pen bezierCurveDemo by hanyanjun (@hanyanjun) on CodePen.

我的demo地址(三次)

 推荐介绍点击以上链接使用

 


 

壹次贝塞尔曲线demo: See the Pen quadraticCurve德姆o by hanyanjun
(@hanyanjun) on CodePen. 作者的d…

一次贝塞尔曲线demo:

原文:The State of
CSS Reflections

译者:nzbin

友谊提醒:由于演示 demo
的包容性,推荐火狐浏览。该小说篇幅较长,内容繁杂,有鲜明难度。而自己自家学识有限,加之时间匆忙,所翻译内容只怕有不适宜及晦涩之处。欢迎大家拍砖指正。

 

 

本身近年在 codePen 上观察了那几个
加载程序,三个纯 CSS
制作的包罗渐变反射的 3D
旋转竖条。它的制作方法是:为每个竖条创制2个因素,然后通过复制每二个因一贯制作反射倒影,最终在反射倒影上增加渐变背景来营造渐隐的功效。听上去有点复杂,而且成立渐隐效果的渐变背景在非纯色背景下是对事情没有什么益处的。有未有更加好的
CSS 方法吧?



澳门葡京 1

 

 

答案是‘断定’的,也是‘否定’的。‘料定’是因为实在有能够做的措施,‘否定’是因为有点措施还不设有。令人遗憾的是,那些代码只可以用预管理器(首要通过轮回来兑现收缩功用)压缩一小点。假如大家不想使用
canvas
并且想包容主流浏览器的当下版本,复制竖条来成立倒影以及经过渐变背景来制作渐隐效果的点子依旧是最佳的。

See the Pen
quadraticCurveDemo by
hanyanjun (@hanyanjun) on
CodePen.

See the Pen
quadraticCurveDemo by
hanyanjun (@hanyanjun) on
CodePen.

那篇小说重要搜求现有的制作反射倒影的不二等秘书诀、比方表达或者的缓和方案、跨浏览器难点以及本身的壹对设法。

我的demo地址(二次)

我的demo地址(二次)

中央设置

推荐介绍点击以上链接使用 

引入点击以上链接使用 

始建竖条成分

率先创设3个 .loader 元素以及在里头创立1一个 .bar 元素

HTML

<div class='loader'>
  <div class='bar'></div>
  <!-- repeat to create 9 more bars -->
</div>

把同样的作业写过多遍是1件伤心的事,所以在该景况下利用1个预管理器会变得相当粗略。大家在此间运用
Haml 模板,当然也有人会挑选别的的沙盘。

Haml

.loader
  - 10.times do
  .bar

 通过相对定位把具有因素放到视图的中级。大多数动静下,大家会使用 top: 50%
,不过未来,使用 bottom: 50% 会使后边的操作更简短。

CSS

div {
  position: absolute;
  bottom: 50%; left: 50%;
}

给竖条设置 width 和 height ,为了能观望它再安装几个 background

SCSS

$bar-w: 1.25em;
$bar-h: 5 * $bar-w;

.bar {
  width: $bar-w; 
  height: $bar-h;
  background: currentColor;
}

我们期待竖条的底层贴合视图的程度宗旨线。设置 bottom: 50% 已经能够了。

前几天抱有的竖条都重合在一起,它们的左边贴在笔直中央线上,尾巴部分贴在档期的顺序中央线上。

See the Pen bar loader 1.1 creating the
bars by
Ana Tudor (@thebabydino) on
CodePen.



原则性竖条

大家必要让最左侧的竖条和最右侧的竖条到垂直宗旨线的离开相等。这几个距离就是竖条数量( $n
)的四分之二加倍竖条的 width( $bar-w )。原始 demo 用的是常常的
CSS,大家会利用 Sass 来压缩代码量。

See the Pen initial (stacked) vs. final
(distributed)
by Ana Tudor (@thebabydino) on
CodePen.

这意味着,从竖条的开始地方上马,大家需求将首先个竖条向左移动 5 * $n * $bar-w
。左侧是 x 轴的负方向,供给在前边加 -
号。所以率先个竖条的 margin-left 就是 -.5 * $n * $bar-w

其次个竖条(以 0 为基数,索引值是 1)就是向右(x
轴的正方向)移动 1收获坐标点,反射倒影的钻探观念。
个竖条的肥瘦($bar-w)。所以第二个竖条的 margin-left
就是 -.5 * $n * $bar-w + $bar-w

其八个竖条(以 0 为基数,索引值是 2)正是向右(x
轴的正方向)移动 2 个竖条的肥瘦。所以第捌个竖条的 margin-left
就是 -.5 * $n * $bar-w + 2 * $bar-w

末尾一个(以 0 为基数,索引值是
$n - 1)正是向右(x轴的正方向)移动 $n - 1
个竖条的幅度。所以最终2个竖条 margin-left
就是 -.5 * $n * $bar-w + ($n - 1) * $bar-w

See the Pen bar
distribution
by Ana Tudor (@thebabydino) on
CodePen.

常见状态下,若是大家觉妥当下竖条的索引值是 $i (以 0
为基数),那么 $i 竖条的 margin-left
就是 -.5 * $n * $bar-w + $i * $bar-w
,能够简化为 ($i - .5 * $n) * $bar-w

那就允许大家使用 Sass 的循环来恒定竖条。

SCSS

$n: 10;

@for $i from 0 to $n {
  .bar:nth-child(#{$i + 1}) {
  margin-left: ($i - .5 * $n) * $bar-w;
  }
}

 为了看驾驭竖条的边界,我们给它叁个 box-shadow

See the Pen bar loader 1.2 positioning the
bars by
Ana Tudor (@thebabydino) on
CodePen.

 

 

给竖条增添渐变

竖条的背景象是从最左边的桔松石绿( #1e3f57
)过渡到最左侧的淡褐色( #63a6c1 )。那听上去很像 the Sass mix()
function
所做的。第3个参数是浅银色,第1个参数是中灰色,第七个参数(称作相对权重)表示将某个( %
表示)深灰色混合进去。

对此第三个竖条,这么些数目正是 0% ( 0%
数量的天灰色),混合结果就是海珍珠白。

对此最终1个竖条,那个数据是 100%( 100% 数量的浅灰褐色,也便是 0%
数量的深黄色),获得的背景象就是木色色。

对于剩下的竖条,我们供给平均布满的中间值。要是咱们有 $n
个竖条,第3个竖条在 0% 的职位,最终一个竖条在 100%
的职责,那么我们要求在两者之间平分成 $n - 1 个区间。

See the Pen distribute n points on 100% interval
(interactive) by Ana Tudor
(@thebabydino) on
CodePen.

一般的话,索引值为 $i
的竖条的绝对权重是 $i * 100% / ($n - 1),那意味我们要增加如下代码:

SCSS

$c: #63a6c1 #1e3f57; // 1st = light 2nd = dark

@for $i from 0 to $n {
  // list of mix() arguments for current bar
  $args: append($c, $i * 100% / ($n - 1));

  .bar:nth-child(#{$i + 1}) {
  background: mix($args...);
  }
}

现今那些竖条看起来就和原始 demo 的如出一辙了:

See the Pen bar loader #1.3 shading the
bars
by Ana Tudor (@thebabydino) on
CodePen.

一回贝塞尔曲线demo:

二次贝塞尔曲线demo:

追究反射的方案

 

 

WebKit浏览器:-webkit-box-reflect

很遗憾,那不是三个正式属性!小编不知道怎么那脾个性未有规则。那1性质第3回出现在Safari浏览器上时,小编还不清楚
CSS。 不过对于 WebKit内核的浏览器,那是七个可怜好的落实格局。它做了大多做事。它的使用很简短,固然在不帮衬该属性的浏览器上,除了不突显反射以外,并未怎么其余影响。

让咱们看看它是怎么职业的,它要求八个参数值:

  • 方向:包含 belowleft , above , right
  • offset
    偏移值(可选):钦命反射的始发地点到成分的底层的距离(这是八个 CSS
    长度值)。
  • 图表遮罩 mask(可选):可以是 CSS 渐变值。

See the Pen how `-webkit-box-reflect`
works by Ana Tudor
(@thebabydino) on
CodePen.

注意linear-gradient()能够有更加多的颜色断点,也足以用
radial-gradient()替换。

在大家的 demo 中,小编第一想到的正是给 .loader 成分增多那1性质。

SCSS

.loader {
  -webkit-box-reflect: below 0 linear-gradient(rgba(#fff), rgba(#fff, .7));
}

唯独在 WebKit 浏览器中测试时,大家并不曾看出反射。

See the Pen bar loader 2.1.1
-webkit-box-reflect
by Ana Tudor (@thebabydino) on
CodePen.

那边发生了什么?大家给持有的成分设置了相对定位,然则并不曾设置 .loader
成分的尺寸。所以那是一个宽高都为 0 的要素。

让大家给那个成分一个由此可见的尺码,高度 height 等于竖条的冲天 $bar-h
,宽度等于全数竖条的 width 之和 $n * $bar-w
。为了看清成分的境界,我们临时给它三个 box-shadow

SCSS

$loader-w: $n * $bar-w;

.loader {
  width: $loader-w; height: $bar-h;
  box-shadow: 0 0 0 1px red;
}

自个儿所以用 box-shadow 而不用 box-shadow
是因为只要子元素溢出父成分,在区别的浏览器上采纳
outline
优秀物体的成效是不均等的。

澳门葡京 2

outline属性在WebKit浏览器中的相比。艾德ge(上)vs.
Firefox(下)

 

丰盛之上代码后的结果能够在 WebKit 浏览器中看看如下效果:

See the Pen bar loader 2.1.2 explicitly sizing the
loader
by Ana Tudor (@thebabydino) on
CodePen.

若果你用的不是 WebKit 浏览器,看上边包车型大巴图样,正是那几个样子:

澳门葡京 3

近来咱们得以见见 loader 成分的边际和倒影,可是地方不科学。大家期望
loader 成分在档次中间的职分,所以把它向左移动 width
的四分之二。我们也冀望子成分的平底与父成分的平底贴合,所以设置子成分 bottom: 0

SCSS

.loader { margin-left: -.5 * $loader-w; }

.bar { bottom: 0; }

立异地点然后的标准如下:

澳门葡京 4

See the Pen bar loader 2.1.3 tweaking loader and bar
positions
by Ana Tudor (@thebabydino) on
CodePen.



火狐浏览器 element() + mask

 

 

element() 构建反射

element() 函数(今后依旧有效,必须在火狐浏览器中动用并且加多 -moz-
前缀)给我们提供了一个像真正图片同样能够随意使用的图像值。它须求三个参数值,就是大家意在以 background
还是 border-image 显示的被选成分的 id
。这允许我们做过多作业,比方动用能够决定的图纸作为背景 。大家也足以在
Firefox 中创建3个反光元素。

需求器重了然的少数就是 element()
函数不是递归函数,我们不能够成立使用要素作为自身背景的图像。那在开创反射的loader成分的伪类上接纳是高枕而卧的,因而大家不要创立额外的要素。

好啊,让我们看看怎么样操作。首先给 loader 成分一个 id
。转到样式表,大家从适用于 WebKit 浏览器的CSS起先。在 loader
成分上增加2个 ::after 伪类

CSS

.loader::after {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  box-shadow: 0 0 0 2px currentColor;
  color: crimson;
  content: 'REFLECTION';
}

为了在结尾效果中看清伪类的境界和大势,大家设置了一些一时半刻性的体制,大家想让它是颠倒的。

See the Pen bar loader 2.2.1 adding a
pseudo
by Ana Tudor (@thebabydino) on
CodePen.

今昔我们必要以底边为准绳把 ::after
伪类镜像过来。为了完毕那或多或少,使用 scaleY()
属性并且选拔稳妥的 transform-origin

以下的可相互 demo
表达了含蓄多少个缩放因子以及调换中央的定向缩放是怎么着工作的:

See the Pen how CSS scaling w.r.t. various origins
works by Ana Tudor
(@thebabydino) on
CodePen.

注意:缩放因子的数值和改造中央能够超越 demo 中分明的限量。

在演示 demo 中,需要 scaleY(-1) 并且 transform-origin 在 ::after
伪类的平底上。

澳门葡京 5

使用scaleY(-1)和2个适龄的
transform-origin 来镜像成分

 

大家把这个设置加多到代码中,并且用 element() 函数把 ::after
伪类的背景设置为 #loader

澳门葡京,CSS

.loader::after {
  transform-origin: 0 100%;
  transform: scaleY(-1);
  background: -moz-element(#loader);
}

注意:由于尤其的来头大家选取 .loaderr
作为选拔器并且鉴于 element() 函数参数的内需大家设置它的 id
为 #loader

加上上述代码后的功能如下所示(只在 Firefox 浏览器中央银立见成效)

See the Pen bar loader 2.2.2 -moz-element() for reflecting
pseudo
by Ana Tudor (@thebabydino) on
CodePen.

对此利用其余浏览器阅读那篇作品的意中人,以下是截图

澳门葡京 6

在Firefox中使用
element() 制作的反射效果

 

See the Pen bezierCurveDemo
by hanyanjun (@hanyanjun) on
CodePen.

See the Pen bezierCurveDemo
by hanyanjun (@hanyanjun) on
CodePen.

用 mask 制作渐变

咱俩选用和 WebKit 意况下一致的章程给反射增加渐变。在 WebKit的情形下,遮罩是 -webkit-box-reflect 属性的壹部分。而近期,大家谈论CSS 的 mask 属性,它供给引用 SVG 作为值。

CSS

mask: url(#fader);

 #fader 成分是三个包括圆柱形的SVG mask 元素。

SVG

<svg>
  <mask id='fader' maskContentUnits='objectBoundingBox'>
    <rect width='1' height='1'/>
  </mask>
</svg>

咱俩得以用 Haml 模板压缩一下

Haml

%svg
  %mask#fader(maskContentUnits='objectBoundingBox')
    %rect(width='1' height='1')

可是,若是大家抬高以上代码,大家的反光倒影消失了,在 Firefox 中查阅如下
demo

See the Pen bar loader 2.2.3 adding a SVG
mask
by Ana Tudor (@thebabydino) on
CodePen.

那是因为,默许意况下,SVG 图形会有三个纯浅灰的 fill
,完全不透明,可是,大家的
遮罩
私下认可是有折射率的。因而为了促成反射渐变的效应大家必要给圆柱形两个 fill
(需引入 SVG linearGradient

Haml

%rect(width='1' height='1' fill='url(#grad)')

一个 SVG linearGradient 由定义的八个点 x1 , y1 , x2 , y2
组成。 x1 和 y1 是渐变线的发轫点(0%)坐标,而 x2 和 y2
是这条线的极限(100%)坐标。纵然那一个数值是空的,暗中认可设为 0% , 0%
, 100% , 0% 。那一个数值描绘了从钦命成分(由于 gradientUnits
的默许值是 objectBoundingBox)的左上( 0% 0% )到右上( 100% 0%
)的一条线。那表示,暗中同意景况下,渐变是从左到右。

唯独在大家的例证中,我们希望渐变从 top 到 bottom ,所以大家将 x2
的值从 100% 设置为 0% 并且将 y2 的值从 0% 设置为 100%
。那使得钦命成分的渐变向量从左上角( 0% 0% )指向左下角( 0% 100%
)。

Haml

%linearGradient#grad(x2='0%' y2='100%')

在 linearGradient 成分之内,我们足足须求五个 stop
成分。当中有多少个特定的性情, 偏移值 offset , 颜色断点 stop-color
发光度断点 stop-color

  1.  偏移值 offset:可以利用百分比 %,通常在 0% 到 100% 之间,和
    CSS 渐变同样。也能够行使数值,日常是从 0 到 一 。
  2.  颜色断点 stop-color:理论上得以应用首要字 hexrgb()
    , rgba() , hsl() 或者 hsla() ,实际上 Safari
    不帮忙半透明数值
    ,因而即使想设置渐变成半晶莹剔透,我们须要正视第6个天性。
  3.  光滑度断点 stop-opacity:能够设置从 0(完全透明)到
    1(完全不透明)的数值。

笔者们供给记住应用渐变遮罩的伪类已经经过 scaleY(-1)
属性镜像过来了,那表示渐变遮罩的平底在视觉上是上边。由此渐变是从顶部(视觉下端)的完全透明到底层(视觉上端)的 .7

因为渐变是从上到下,所以首先个断点完全透明的。

Haml

%linearGradient#grad(x2='0%' y2='100%')
  %stop(offset='0' stop-color='#fff' stop-opacity='0')
  %stop(offset='1' stop-color='#fff' stop-opacity='.7')

增加线性渐变之后,在Firefox中正是我们想要的结果了

澳门葡京 7

实时效果如下:

See the Pen bar loader 2.2.4 linearGradient
it
by Ana Tudor (@thebabydino) on
CodePen.

我的demo地址(三次)

我的demo地址(三次)

SVG渐变的主题素材

在我们的例子中,因为遮罩渐变是笔直的之所以看起来相当的粗略。不过假设渐变不是笔直、水平依然从三个角到另一个角咋做?如若大家想要贰个特定角度的渐变如何是好?

SVG中 有一个 gradientTransform 属性,它能够因而点名 x1y1
, x2 ,  y2 来旋转渐变线。有人只怕会以为那是成立具备特定角度的 CSS
渐变的简要方法。然而,并从未想像的那么粗略!

想一想从浅紫水晶色到冰雪浅莲灰渐变的例子。为了看得驾驭一些,大家在两者之间 百分之五拾的职分设置二个猛烈的对接。首先大家将以此渐变的 CSS 角度设置为 0deg
。那意味着渐变会从尾部(石磨蓝)过渡到顶部(高粱红色)。成立那么些渐变的CSS
如下:

CSS

background-image: linear-gradient(0deg, #e18728 50%, #d14730 0);

设若你还不明了 CSS 线性渐变的干活原理,你能够看一下Patrick
Brosset 做的那一个
特出文章。

我们看看的结果如下:

See the Pen CSS linear-gradient at 0deg with sharp stop at
50% by Ana Tudor
(@thebabydino) on
CodePen.

为了制作 SVG 的渐变,大家设置 y1100%,  y2 为 0% 以及把 x1
和 x2 设置成一样的数值(轻巧起见设置为
0)。这意味着渐变线从底层垂直上涨到顶部。大家同时把断点的偏移值设置为
50%

Jade

linearGradient#g(y1='100%' x2='0%' y2='0%' gradientTransform='rotate(0 .5 .5)')
  stop(offset='50%' stop-color='#e18728')
  stop(offset='50%' stop-color='#d14730')

编辑注:小编问 Ana 为何他明日要选拔 Jade 模板。她说:笔者开场使用 Haml
模板是因为自身想制止引进笔者不供给的循环变量,而自此采取 Jade
模板是因为它同意变量和测算。

这一个渐变还未有转动,因为 gradientTransform 的值是 rotate(0 .5 .5)
。当中后八个数值表示渐变旋转的坐标。在那之中 0 0 表示左上角, 1 1
表示右下角, .5 .5 表示主题。

实时效果如下:

See the Pen SVG linearGradient bottom to top rotated by 0deg with sharp
stop at 50% by Ana Tudor
(@thebabydino) on
CodePen.

万1大家期待渐变从左到右,在 CSS 渐变中,大家把角度从 0deg 设置为
90deg

CSS

background-image: linear-gradient(90deg, #e18728 50%, #d14730 0);

See the Pen CSS linear-gradient at 90deg with sharp stop at
50% by Ana Tudor
(@thebabydino) on
CodePen.

为了在 SVG 渐变中拿走1致的结果,大家将 gradientTransform
的值设置为 rotate(90 .5 .5)

Jade

linearGradient#g(y1='100%' x2='0%' y2='0%' gradientTransform='rotate(90 .5 .5)')
  // same stops as before

See the Pen SVG linearGradient bottom to top rotated by 90deg with
sharp stop at 50% by Ana
Tudor (@thebabydino) on
CodePen.

到近期结束,1切符合规律。用 SVG 来取代 CSS
渐变并未遇上太多难题。让大家品尝一下任何的角度。在底下的可互相 demo
中,左边是贰个 CSS 渐变,右边是三个SVG
渐变。天灰的线是渐变线,它与深藕红和钴铁青的交界线是笔直的。拖拽滑块能够而且改造CSS 和 SVG 的渐变角度。我们相会到一些荒谬:有些数值不是 90deg 的倍数。

See the Pen CSS vs. SVG gradient, same angle (interactive,
responsive) by Ana Tudor
(@thebabydino) on
CodePen.

如以上 demo 所示,有些数值不是 90deg
的翻番,我们鞭长莫及获取平等的结果。唯有当大家设置渐变的因素是星型时结果是一律的。这表示大家得以给一个更加大的方框变成分设置渐变,然后裁剪成实际的形状。但是做那个职业会让 element()
和 mask 来创设渐变倒影的艺术特别扑朔迷离。

 推荐点击以上链接使用

 推荐介绍点击以上链接使用

艾德ge:能够全用SVG吗?

令人遗憾的是,以上提到的两种办法在 艾德ge 中都未曾用。由此既能在 艾德ge
中运营又无需手动复制每种竖条的仅局地艺术正是,放下前边的专门的职业再一次创造 SVG
加载器。那中艺术具备跨浏览器的优势。

如上所述,我们创制三个涵盖 viewBox 的 SVG 元素,以便把 0 0
点放在中间。大家定义2个竖条,它的尾部在 x 轴上,左边在 y
轴上。然后我们在 #loader 群组中根据需求复制(通过 SVG use
成分)多次。我们如在此以前同1放置这一个竖条的地点。

Jade

- var bar_w = 125, bar_h = 5 * bar_w;
- var n = 10;
- var vb_w = n * bar_w;
- var vb_h = 2 * bar_h;
- var vb_x = -.5 * vb_w, vb_y = -.5 * vb_h;

svg(viewBox=[vb_x, vb_y, vb_w, vb_h].join(' '))
  defs
    rect#bar(y=-bar_h width=bar_w height=bar_h)

  g#loader
    - for(var i = 0; i < n; i++) {
      - var x = (i - .5 * n) * bar_w;
      use(xlink:href='#bar' x=x)
    - }

如上代码的效应如下:

See the Pen bar loader 2.3.1 creating and positioning SVG
bars
by Ana Tudor (@thebabydino) on
CodePen.

后天大家早已创办了装有竖条,我们想把 svg
成分的地点调治的更确切而且大家利用 flexbox
属性。同时大家也和前面同样给竖条加多渐变色。大家用Sass做那几个业务:

SCSS

$n: 10;
$c: #63a6c1 #1e3f57;
$bar-w: 1.25em;
$bar-h: 5 * $bar-w;
$loader-w: $n * $bar-w;
$loader-h: 2 * $bar-h;

body {
  display: flex;
  justify-content: center;
  margin: 0;
  height: 100vh;
}

svg {
  align-self: center;
  width: $loader-w; height: $loader-h;
}

@for $i from 0 to $n {
  $args: append($c, $i * 100%/($n - 1));

  [id='loader'] use:nth-child(#{$i + 1}) {
    fill: mix($args...);
  }
}

加上之上代码后的功力如下:

See the Pen bar loader 2.3.2 sizing + positioning the SVG & shading the
bars
by Ana Tudor (@thebabydino) on
CodePen.

复制 #loader 群组(再次使用 use 元素)。通过 scale(1 -1)
方法镜像克隆体并且给它加多二个遮罩,和我们此前给伪类成分设置的同一。私下认可意况下,SVG
成分相对于 SVG 画布的 0 0
点缩放,这几个点恰恰位于loader
成分的后面部分上,能够很完善的将 loader
成分镜像过来,大家毫不安装 transform-origin

Jade/SVG

use(xlink:href='#loader' transform='scale(1 -1)')

使用 transform 属性代替CSS调换,因为 CSS 转变在 艾德ge 中不支持。

近期大家有了反光倒影,如下所示:

See the Pen bar loader 2.3.3 getting the
reflection
by Ana Tudor (@thebabydino) on
CodePen.

最终一步正是用 mask
给反射增加渐变。它的点子及代码和事先都以均等的,大家不再赘述。全部的代码都在上边包车型客车Pen 中

See the Pen bar loader 2.3.4 fading the
reflection
by Ana Tudor (@thebabydino) on
CodePen.

 

 

动画

固有案例中的 CSS 动画很轻松,正是用3D格局旋转竖条:

CSS

@keyframes bar {
  0% {
  transform: rotate(-.5turn) rotateX(-1turn);
  }
  75%, 100% { transform: none; }
}

负有的竖条都以同等的卡通片:

CSS

animation: bar 3s cubic-bezier(.81, .04, .4, .7) infinite;

大家只是给循环的竖条增多了不一致的延迟时间。

SCSS

animation-delay: $i*50ms;

因为大家希望旋转的竖条具备3D效果,全体大家给 loader
成分加多三个 perspective 属性

可是使用 -webkit-box-reflect 方法后和预期的1致只可以在 WebKit浏览器中实行。

澳门葡京 8

在Chrome浏览器中使用 -webkit-box-reflect
属性后的末梢结出

咱俩同时增添了一张背景图片来看一下它的显现效果。只可以在 WebKit浏览器中预览的意义如下:

See the Pen bar loader 3.1 animating the
bars
by Ana Tudor (@thebabydino) on
CodePen.

我们也尝尝在 Firefox 中执行动画。但是,要是大家把动画加多到此前在
Firefox 中运作出色的代码中,好像现身了一部分难题。

澳门葡京 9

在Firefox中动用element()和mask方法做的卡通片雏形

 

此间出现了一些难点,上面包车型地铁demo能够在Firefox中实时检查测试:

See the Pen bar loader 3.2.1 adding
animation
by Ana Tudor (@thebabydino) on
CodePen.

第四个难点正是反光在伪类的边界处被切断。我们得以因而增添 loader
成分的尺码来修补这一难点(伪类成分不受影响):

SCSS

$loader-w: ($n + 1) * $bar-w + $bar-h;

只是我们对此其余的多个难题就手足无措了。当竖条举行3D旋转时,反射无法平滑的渲染更新;以及 perspective
属性导致了竖条的未有。

澳门葡京 10澳门葡京 11

 增多perspective属性的结果              
                                  没有增长perspective属性的结果

以下是实时的显得结果:

See the Pen bar loader 3.2.2
tweaks
by Ana Tudor (@thebabydino) on
CodePen.

全总都用 SVG 的方案如何?很倒霉,上面的事例中,大家只用 CSS 的 3D
变化制作动画。在 艾德ge 中,SVG 成分不支持 CSS
的转变属性,所以我们此前在创造倒影时使用了 SVG 的 transform
属性。但是 transform 属性是严谨的 2D 形式,大家不得不利用 JavaScript 。

据此就现阶段来看,想要制作贰个一双两好全体浏览器并且不要复制每贰个竖条的加载动画是不恐怕了。大家前几天能做的正是创办四个loader 成分,每二个都有同等数量的竖条。

Haml

- 2.times do
  .loader
    - 10.times do 
      .bar

竖条的体制和事先同一,我们选择 scale(-1) 来镜像第二个loader成分。

CSS

.loader:nth-child(2) {
  transform: scaleY(-1);
}

小编们抬高竖条动画后获得如下结果:

See the Pen bar loader 3.3.1 reflection via
duplication
by Ana Tudor (@thebabydino) on
CodePen.

近期大家供给给反射增多渐变。遗憾的是,我们无法在其次个 loader
成分上选择 mask ,因为它只在跨浏览器的 SVG 成分上有效性。艾德ge
近年来还不扶助 HTML 成分的遮罩效果,然则你能够给官方提建议。

我们只可以在第3个 loader
成分上增多渐变背景。那样1来我们就无法选取图片背景了。渐变背景只在纯色背景可能个其他事态下才使得。我们在其次个
loader 成分的 ::after
上增添渐变背景而且安装的大学一年级些,这样就不会挡住旋转的竖条。

SCSS

$bgc: #eee;
$cover-h: $bar-w + $bar-h;
$cover-w: $n * $bar-w + $cover-h;

html { background: $bgc; }

.loader:nth-child(2)::after {
  margin-left: -.5 * $cover-w;
  width: $cover-w; height: $cover-h;
  background: linear-gradient($bgc $bar-w, rgba($bgc, .3));
  content: '';
}

说起底结果如下:

See the Pen bar loader 3.3.2 emulate fading with
cover
by Ana Tudor (@thebabydino) on
CodePen.



末段的思量

大家须要三个越来越好的跨浏览器化解方案。小编深信不疑制作物体的反射并不必要像大家在这些例子中平等复制所有的子成分。为了制作能够停放在图像背景 background
上的渐变反射,我们无法替换到 SVG 的方案(其本身也有成都百货上千标题)。

哪①种方案越来越好? -webkit-box-reflect 还是 element()mask
?作者也不晓得。笔者个人喜欢同时选取。

虽说应用:reflection
伪类成分
看上去很有理,然则自己早就确信本身不想选用额外的成分制作反射。可是以往有比并非插入额外成分更让自己喜欢的政工。使用 element()
能够在不相同倾向上随便创建四个反光,以及用分化的办法调换反射,比方 3D
旋转或然倾斜。那多亏我欢腾它的原由。而且用 SVG
做遮罩意味着大家能够在反射上应用更扑朔迷离的遮罩同时获取更酷的机能。

1派,本领越强,权利越大。恐怕你从巳时间去接触庞大成效背后的繁杂细节。有时你只是想要三个简便的章程来获得3个粗略的结果。

 

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website