威尼斯城所有登入网址

图片 1
每个Streams对象都有一个包装类
图片 20
即可完成功能区最小化,显示正在编辑的文档的名称以及正在使用的软件的名称

   译文出处威尼斯城所有登入网址,然后通过复制每一个元素来制作反射倒影

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

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

2017/09/28 · CSS,
HTML5 ·
SVG

原文出处: David
Khourshid   译文出处:码农网
– 小峰   

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

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

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

话不多说,开始咯!

威尼斯城所有登入网址 1

在线演示
源码下载

原文:The State of
CSS Reflections

译者:nzbin

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

在当今时代,SVG是最流行的和正在被众多的设计人员和开发人员使用,创建支持视网膜和响应式的网页设计。绘制SVG不是一个艰巨的任务,因为大量的 JavaScript 库可与 SVG 图像搭配使用。这些JS库帮助设计师和开发人员可以轻松地为他们的项目和Web应用程序创建创新和逼真的图形。

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

塑造动物外形

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

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

1.Textures.js

Textures.js易于改进的数据可视化添加SVG图形。它包括一个巨大的各种纹理,包括直线,圆,路径,甚至自定义模式。

威尼斯城所有登入网址 2

在线预览

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

HTML标记

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

<!– Markup for the fox head –> <div class=”fox-head”>
<div class=”fox-face”> <div class=”fox-ears”> <div
class=”fox-ear”/> <div class=”fox-ear”/> </div> <div
class=”fox-skull”/> <div class=”fox-front”/> <div
class=”fox-eyes”/> <div class=”fox-nose”/> </div>
</div> <!– Markup for the husky head –> <div
class=”husky-head”> <div class=”husky-ear”/> <div
class=”husky-ear”/> <div class=”husky-face”> <div
class=”husky-eye”/> <div class=”husky-eye”/> <div
class=”husky-nose”/> <div class=”husky-mouth”> <div
class=”husky-lips”/> <div class=”husky-tongue”/> </div>
</div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!– Markup for the fox head –>
 
 
<div class="fox-head">
  <div class="fox-face">            
    <div class="fox-ears">
      <div class="fox-ear"/>
      <div class="fox-ear"/>
    </div>
    <div class="fox-skull"/>
    <div class="fox-front"/>
    <div class="fox-eyes"/>
    <div class="fox-nose"/>
  </div>
</div>
 
 
 
<!– Markup for the husky head –>
 
 
<div class="husky-head">
  <div class="husky-ear"/>
  <div class="husky-ear"/>
  <div class="husky-face">
    <div class="husky-eye"/>
    <div class="husky-eye"/>
    <div class="husky-nose"/>
    <div class="husky-mouth">
      <div class="husky-lips"/>
      <div class="husky-tongue"/>
    </div>
  </div>
</div>

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

威尼斯城所有登入网址 3

威尼斯城所有登入网址 4

2.Circulus.svg

Circulus.svg是一个圆形的菜单生成器,可以生成SVG的菜单,它提供了两个不同的风格,全或半圈,和造型的各种选项。

威尼斯城所有登入网址 5

在线预览

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

用CSS塑造图形

CSS的border-radius属性大量用来塑造哈士奇的形象。对于许多元素要素,需要对每个边界半径进行逐个控制。例如,下面是如何构造哈士奇后腿的代码:

.husky-hind-leg { // … border-top-left-radius: 35% 100%;
border-top-right-radius: 40% 100%; }

1
2
3
4
5
.husky-hind-leg {
  // …
  border-top-left-radius: 35% 100%;
  border-top-right-radius: 40% 100%;
}

第一个数字表示曲线从顶部/底部边缘开始的深度,第二个数字表示曲线从左/右边缘开始的深度。

其他形状,如前腿,不能单独用border-radius成形,需要使用transform成形:

.husky-front-legs > .husky-leg:before { transform: skewY(-30deg)
skewX(10deg); transform-origin: top right; }

1
2
3
4
.husky-front-legs > .husky-leg:before {
  transform: skewY(-30deg) skewX(10deg);
  transform-origin: top right;
}

一旦图形就位,那么每个元素就能在其父元素中被赋予绝对的基于百分比的位置。这确保每个身体部位的精确放置以及响应性。

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

3.deSVG

deSVG它使简单的从HTML删除内联SVG的膨胀。它可以让你的风格你的SVG和CSS,并保持您的SVG可即使没有JavaScript。

威尼斯城所有登入网址 6

在线预览

话不多说,开始咯!

用SVG塑造图形

至于狐狸,Sass-SVG被用来为每个身体部位创建复杂的SVG形状。SVG图像可以用作背景图像,更好的是,只要它们是基于64或UTF-8编码的,就可以被内联编写(为了最大限度的浏览器支持)。

不过,SVG代码手写起来非常棘手。我使用Adobe Illustrator来创建初始形状:

威尼斯城所有登入网址 7

然后我将每个身体部分保存为SVG图像。SVG代码通过Sass-SVG传输到SCSS样式表。例如,这是狐狸的鼻子:

JavaScript

.fox-nose:before { @ include svg((viewBox: (0 0 168 168))) { // the nose
@ include svg(‘path’, ( fill: $color-nose, d:
‘M83.7,86.7c3.3,0,11.6-3.9,11.6-7.1c0-3.2-9.4-3.2-11.6-3.2c-2.2,0-11.6,0-11.6,3.2
C72.1,82.8,80.4,86.7,83.7,86.7z’ )); // the line connecting the nose to
the mouth @ include svg(‘path’, ( stroke: $color-nose, fill: none, d:
‘M83.7,102.3V86.7’ )); // the mouth @ include svg(‘path’, ( stroke:
$color-nose, fill: none, d:
‘M94.5,104.9c0,0-5.2-2.7-10.8-2.7c-5.6,0-10.8,2.7-10.8,2.7’ )); } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.fox-nose:before {
@ include svg((viewBox: (0 0 168 168))) {
    // the nose
   @ include svg(‘path’, (
      fill: $color-nose,
      d: ‘M83.7,86.7c3.3,0,11.6-3.9,11.6-7.1c0-3.2-9.4-3.2-11.6-3.2c-2.2,0-11.6,0-11.6,3.2   C72.1,82.8,80.4,86.7,83.7,86.7z’
    ));
 
    // the line connecting the nose to the mouth
   @ include svg(‘path’, (
      stroke: $color-nose,
      fill: none,
      d: ‘M83.7,102.3V86.7’
    ));
 
    // the mouth
   @ include svg(‘path’, (
      stroke: $color-nose,
      fill: none,
      d: ‘M94.5,104.9c0,0-5.2-2.7-10.8-2.7c-5.6,0-10.8,2.7-10.8,2.7’
    ));
  }
}

这将在url()中生成一个编码的内联SVG字符串,看起来像这样:

.fox-nose:before { background-image:
url(“data:image/svg+xml;,%3Csvg…”); }

1
2
3
.fox-nose:before {
  background-image: url("data:image/svg+xml;,%3Csvg…");
}

由于SVG是一个背景图像,因此它可以被转换和动画化,就像一个HTML元素一样。使用Sass-SVG,Sass
$variables可用于完全控制SVG填充和笔触颜色。

通过内联SVG使狐狸响应起来很简单。viewbox属性值((viewBox:(0 0 168
168)))直接来自SVG文件,但只要保持高/宽比率,那么包含SVG背景图像的元素可以是任意大小。狐狸头部的所有部分都是绝对定位的,具有与.fox-head相同的高度和宽度。

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

4.SVG Morpheus

SVG
Morpheus是一个 JavaScript 库,可以让你创建SVG图标变成另一个。它的易于使用和工程与材料设计迷人的细节转换。

威尼斯城所有登入网址 8

在线预览

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图