CSS3 SVG实现可爱的动物哈士奇和狐狸动画

澳门新葡亰赌995577 3

本文由码农网 –
小峰原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

原文:The State of
CSS Reflections

译者:nzbin

友情提示:由于演示 demo
的兼容性,推荐火狐浏览。该文章篇幅较长,内容庞杂,有一定难度。而我本人学识有限,加之时间仓促,所翻译内容可能有不恰当及晦涩之处。欢迎大家拍砖指正。

今天,我想向大家展示如何巧妙地使用HTML、CSS排序动画和SVG滤镜把生活中可能最可爱的东西之一——动物画到网页上。我们将探讨绘制动物的两种技术:一种使用纯HTML和CSS,另一种使用内联SVG背景图像。

我最近在 codePen 上看到了这个
加载程序,一个纯 CSS
制作的带有渐变反射的 3D
旋转竖条。它的制作方法是:为每个竖条创建一个元素,然后通过复制每一个元素来制作反射倒影,最后在反射倒影上添加渐变背景来制作渐隐的效果。听上去有点复杂,而且创建渐隐效果的渐变背景在非纯色背景下是无效的。有没有更好的
CSS 方法呢?

此演示高度实验性质——动画SVG滤镜目前仅在Chrome中可用。

澳门新葡亰赌995577 1

所涉及的动画也很复杂,因此本教程将重点介绍创建这些动物以及栩栩如生的动作所涉及的不同技术。放飞你的创意,自行创作独特和俏皮的动物动画吧。

答案是‘肯定’的,也是‘否定’的。‘肯定’是因为确实有可以做的方法,‘否定’是因为有些方法还不存在。令人遗憾的是,这些代码只能用预处理器(主要通过循环来实现压缩功能)压缩一点点。如果我们不想使用
canvas
并且想兼容主流浏览器的当前版本,复制竖条来制作倒影以及通过渐变背景来制作渐隐效果的方法仍然是最好的。

话不多说,开始咯!

这篇文章主要探索现有的制作反射倒影的方法、举例说明可能的解决方案、跨浏览器问题以及我的一些想法。

澳门新葡亰赌995577 2

基本设置

在线演示
 
源码下载

创建竖条元素

首先创建一个 .loader 元素以及在其中创建10个 .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.

塑造动物外形

演示使用两种不同的技术来创建动物不同身体部位的形状。哈士奇使用CSS border-radius属性,狐狸使用内联背景SVG图像,因为后者的形状更复杂。

定位竖条

我们需要让最左边的竖条和最右边的竖条到垂直中心线的距离相等。这个距离就是竖条数量( $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
个竖条的宽度。所以最后一个竖条 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.

HTML标记

两只动物都使用嵌套的HTML部分对身体部位进行分组。分组的概念对于创造逼真的动画效果非常重要——当头部移动时,眼睛和耳朵也应该保持一起移动,因为它们是长在头上的。

<!-- Markup for the fox head -->
<div class="fox-head">
  <div class="fox-face">            
    <div class="fox-ears">
      <div class="fox-ear"></div>
      <div class="fox-ear"></div>
    </div>
    <div class="fox-skull"></div>
    <div class="fox-front"></div>
    <div class="fox-eyes"></div>
    <div class="fox-nose"></div>
  </div>
</div>

<!-- Markup for the husky head -->
<div class="husky-head">
  <div class="husky-ear"></div>
  <div class="husky-ear"></div>
  <div class="husky-face">
    <div class="husky-eye"></div>
    <div class="husky-eye"></div>
    <div class="husky-nose"></div>
    <div class="husky-mouth">
      <div class="husky-lips"></div>
      <div class="husky-tongue"></div>
    </div>
  </div>
</div>

每个部分均可以独立移动,并随着其父元素的移动而移动,这样会产生更逼真的效果。不知道你发现没有,尾巴是深深嵌套到其他尾部组件中的。当每个尾巴部分相对于其母体定位,然后旋转相同的量时,就会产生均匀曲线的视觉感。

澳门新葡亰赌995577 3

给竖条添加渐变

竖条的背景色是从最左边的深蓝色( #1e3f57
)过渡到最右边的浅蓝色( #63a6c1 )。这听上去很像 the Sass mix()
function
所做的。第一个参数是浅蓝色,第二个参数是深蓝色,第三个参数(称作相对权重)表示将多少( %
表示)浅蓝色混合进去。

对于第一个竖条,这个数量就是 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),这意味着我们要添加如下代码:

澳门新葡亰赌995577,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.

发表评论

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

相关文章

网站地图xml地图