收获坐标点,反射倒影的研讨思量

By admin in 4858美高梅 on 2019年4月26日

二回贝塞尔曲线demo:

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

三遍贝塞尔曲线demo:

 


 

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

我的demo地址(二次)

引入点击以上链接使用 


 

3次贝塞尔曲线demo:

 


 

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

我的demo地址(三次)

 引入点击以上链接使用

 


 

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

1遍贝塞尔曲线demo:

原文:The State of
CSS Reflections

译者:nzbin

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

 

 

自身近年在 codePen 上观察了这一个
加载程序,三个纯 CSS
制作的包括渐变反射的 3D
旋转竖条。它的制作方法是:为各样竖条创制多个要素,然后通过复制每四个成分来塑造反射倒影,最后在反射倒影上增添渐变背景来创造渐隐的效益。听上去有点复杂,而且创设渐隐效果的渐变背景在非纯色背景下是低效的。有未有更加好的
CSS 方法吗?



4858美高梅 1

 

 

答案是‘确定’的,也是‘否定’的。‘确定’是因为实在有能够做的方法,‘否定’是因为有点措施还不存在。让人遗憾的是,这几个代码只好用预管理器(主要透过巡回来兑现缩短功用)压缩一小点。假若我们不想使用
canvas
并且想包容主流浏览器的此时此刻版本,复制竖条来成立倒影以及通过渐变背景来制作渐隐效果的章程仍旧是最佳的。

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

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

那篇文章首要索求现成的创设反射倒影的法子、比如表达或者的消除方案、跨浏览器难题以及自己的一对想方设法。

我的demo地址(二次)

我的demo地址(二次)

主干设置

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

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

创办竖条成分

率先创设四个 .loader 成分以及在中间创制12个 .bar 元素

HTML

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

把一样的事体写过多遍是一件忧伤的事,所以在这一场合下利用二个预管理器会变得很轻便。我们在此间运用
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
)的50%倍增竖条的 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
个竖条的上升的幅度。所以最后3个竖条 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;
  }
}

 为了看精晓竖条的界线,我们给它1个 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个参数是青黄色,首个参数是枣莲红,第伍个参数(称作绝对权重)表示将稍微( %
表示)黄色色混合进去。

对于第2个竖条,那几个数目正是 0% ( 0%
数量的水泥灰色),混合结果正是浅绛天青。

对于最后贰个竖条,这些数据是 100%( 100% 数量的石绿色,也正是 0%
数量的灰深翠绿),获得的背景象就是米黑灰。

对于剩下的竖条,大家需求平均布满的中间值。要是大家有 $n
个竖条,第一个竖条在 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

很遗憾,那不是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 元素增加这一性质。

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
优秀物体的成效是不1致的。

4858美高梅 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 浏览器,看上面包车型地铁图纸,便是那几个样子:

4858美高梅 3

现行反革命我们得以见到 loader 元素的分界和倒影,可是地方不科学。大家期待
loader 成分在档案的次序中间的地方,所以把它向左移动 width
的3/陆。大家也期待子成分的底层与父成分的最底层贴合,所以设置子成分 bottom: 0

SCSS

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

.bar { bottom: 0; }

改良地点然后的规范如下:

4858美高梅 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
。那允许我们做过多作业,比方采纳能够垄断(monopoly)的图片作为背景 。大家也能够在
Firefox 中创制一个反光成分。

急需珍视了解的有些正是 element()
函数不是递归函数,我们不可能创建使用要素作为本身背景的图像。那在创制反射的loader成分的伪类上应用是平安的,由此大家不用创建额外的成分。

好吧,让大家看看如何操作。首先给 loader 元素二个 id
。转到样式表,大家从适用于 WebKit 浏览器的CSS初始。在 loader
成分上加多贰个 ::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
伪类的平底上。

4858美高梅 5

使用scaleY(-1)和多个适宜的
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.

对此利用其它浏览器阅读那篇小说的情人,以下是截图

4858美高梅 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 属性的1部分。近年来后,大家研讨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
4858美高梅,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中就是大家想要的结果了

4858美高梅 7

实时效果如下:

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

我的demo地址(三次)

我的demo地址(三次)

SVG渐变的难题

在大家的事例中,因为遮罩渐变是笔直的之所以看起来很简短。可是假设渐变不是笔直、水平依旧从二个角到另叁个角如何是好?假使大家想要3个特定角度的渐变如何是好?

SVG中 有一个 gradientTransform 属性,它能够通过点名 x1y1
, x2 ,  y2 来旋转渐变线。有人也许会以为那是创建具备特定角度的 CSS
渐变的归纳方法。但是,并不曾设想的那么轻巧!

想1想从黄铜色到大青色渐变的例子。为了看得精通一些,大家在两者之间 二分之一的职位设置三个能够的过渡。首先我们将以此渐变的 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.

若是大家希望渐变从左到右,在 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.

到近年来甘休,一切符合规律。用 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
的倍数,我们无能为力获得1致的结果。只有当大家设置渐变的成分是星型时结果是千篇1律的。那意味着大家得以给八个越来越大的四方产生分设置渐变,然后裁剪成实际的形制。可是做那么些工作会让 element()
和 mask 来创造渐变倒影的艺术越发错综复杂。

 推荐点击以上链接使用

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

艾德ge:能够全用SVG吗?

令人遗憾的是,以上关联的三种艺术在 艾德ge 中都并未有用。由此既能在 艾德ge
中运作又无需手动复制每种竖条的仅有的艺术正是,放下前面包车型客车干活再次制作 SVG
加载器。这中方法具备跨浏览器的优势。

看来,大家创立二个分包 viewBox 的 SVG 元素,以便把 0 0
点放在中间。我们定义3个竖条,它的最底层在 x 轴上,左边在 y
轴上。然后大家在 #loader 群组中依据必要复制(通过 SVG use
元素)数次。大家如从前同一放置这个竖条的岗位。

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 方法后和预期的壹律只能在 WebKit浏览器中推行。

4858美高梅 8

在Chrome浏览器中采纳 -webkit-box-reflect
属性后的尾声结出

作者们同时加多了一张背景图片来看一下它的显现有效。只可以在 WebKit浏览器中预览的功用如下:

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

大家也尝尝在 Firefox 中举办动画。不过,假如大家把动画增添到此前在
Firefox 中运转突出的代码中,好像出现了一些难点。

4858美高梅 9

在Firefox中接纳element()和mask方法做的动画片雏形

 

那边出现了有的标题,上面包车型大巴demo能够在Firefox中实时检验:

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

首先个难点就是反光在伪类的边界处被隔断。我们得以透过扩充 loader
成分的尺码来修补那1题材(伪类成分不受影响):

SCSS

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

不过大家对此别的的五个问题就惊慌失措了。当竖条进行3D旋转时,反射不可能平滑的渲染更新;以及 perspective
属性导致了竖条的消失。

4858美高梅 104858美高梅 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 成分的遮罩效果,可是你能够给官方提建议。

咱俩只可以在其次个 loader
元素上加多渐变背景。那样壹来我们就不能够采纳图片背景了。渐变背景只在纯色背景大概个其他地方下才有效。大家在其次个
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.



末段的思虑

我们必要3个更加好的跨浏览器化解方案。小编深信制作物体的反光并不供给像大家在这几个事例中平等复制全体的子成分。为了制作能够停放在图像背景 background
上的渐变反射,大家不能够替换来 SVG 的方案(其本人也有好些个标题)。

哪一种方案更加好? -webkit-box-reflect 还是 element()mask
?笔者也不明了。笔者个人喜好同时利用。

尽管如此采取:reflection
伪类成分
看上去很客观,可是笔者已经确信自个儿不想利用额外的因素制作反射。不过以往有比并非插入额外成分更让作者爱不释手的职业。使用 element()
能够在不相同倾向上肆意成立多个反光,以及用区别的点子转变反射,比方 3D
旋转也许倾斜。这多亏自家欣赏它的缘由。而且用 SVG
做遮罩意味着我们得以在反射上行使更复杂的遮罩同时取得更酷的效劳。

另1方面,手艺越强,责任越大。只怕你未曾时间去接触庞大功效背后的纷纷细节。有时你只是想要2个粗略的秘诀来得到1个粗略的结果。

 

 

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有