百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> 适合初学者学习的CSS3实现招人喜欢的动物
分享文章到:

适合初学者学习的CSS3实现招人喜欢的动物

发布时间:09/01 来源:未知 浏览: 关键词:
今天,我想向大家展现怎样奇妙地运用HTML、CSS排序动画和SVG滤镜把生活中可能最招人喜欢的东西之一——动物画到网页上。话未几说,开端咯!

塑造动物形状

演示运用两种不一样的技术来新建动物不一样身体部位的外形。哈士奇运用CSS border-radius属性,狐狸运用内联配景SVG图像,由于后者的外形更复杂。

HTML标志

两只动物都运用嵌套的HTML局部对身体部位进行分组。分组的概念关于制造传神的动画结果非常重要——当头部挪移时,眼睛和耳朵也应当维持一起挪移,由于它们是长在头上的。


每个局部均可以独立挪移,并随着其父元素的挪移而挪移,这样会发生更传神的结果。不晓得你发明没有,尾巴是深深嵌套到其他尾部组件中的。当每个尾巴局部相关于其母体定位,然后扭转雷同的量时,就会发生平均曲线的视觉感。

用CSS塑造图形

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

.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;
}

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

用SVG塑造图形

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

不外,SVG代码手写起来非常棘手。我运用Adobe Illustrator来新建初始外形:

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

.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;charset=utf8,%3Csvg...");
}

因为SVG是一个配景图像,因而它可以被转换和动画化,就像一个HTML元素同样。运用Sass-SVG,Sass $variables可用于完全控制SVG添补和笔触色彩。

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

“Squigglevision”和SVG滤镜

Squigglevision是一种通过摆动外形轮廓来模拟手绘动画的动画技术。这使得像狐狸和哈士奇这样的场景看上去更加动态化和手绘化,即便动物在不动的时候也是如此。

SVG有一个称为的滤镜,可以给任何利用了此滤镜的地方“噪声”。联合滤镜以指定像素在每个过滤器中挪移的距离。


  
    
      
      
    
    
      

    
    
      

    
    
      

    
    
      

    
   

属性的任何元素。要新建“squigglevision”结果,关键帧动画迅速地一次设定一个滤镜

@keyframes squigglevision {
  0% {
    -webkit-filter: url('#squiggly-0');
    filter: url('#squiggly-0');
  }
  25% {
    -webkit-filter: url('#squiggly-1');
    filter: url('#squiggly-1');
  }
  50% {
    -webkit-filter: url('#squiggly-2');
    filter: url('#squiggly-2');
  }
  75% {
    -webkit-filter: url('#squiggly-3');
    filter: url('#squiggly-3');
  }
  100% {
    -webkit-filter: url('#squiggly-4');
    filter: url('#squiggly-4');
  }
}

注意:这些SVG滤镜当前在Firefox中似乎不起作用,因而可以将这样的滤镜动画视为一种渐进加强处置。

给动物增加动画特效

CSS关键帧不克不及为我们供给一种利便的排序和组合动画的办法。解决这个题目的最佳办法是将动画规划(故事板)作为工夫轴,并运用预处置器,如Sass,生成关键帧。

例如狐狸,在概述每个动画应产生的故事板之后,转换和绝对工夫偏移(秒)被用于对每个身体局部进动作画处置。下列是SCSS中对狐狸鼻子进行概述的一个例子:

$animations: (
  // ...
  'nose': (
    // resting position
    (4s, 5s, 7s): rotateY(-4deg),
    // nose down
    4.5s: rotateY(-4deg) rotateX(-3deg),
    // fox looks left
    (7.5s, 9s): rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg),
    // fox looks right
    (9.5s, 12s): rotateY(7deg),
    // fox looks straight ahead
    13s: rotateY(0),
  ),
  // ...
);

在这里,$animations是一类Sass map,其中键是动画的名称(例如“nose”)。每个动画名称的值是另一个map,其中键是以秒为单位的偏移或偏移列表(例如(7.5s,9s)),而且值是每个偏移键的transform属性。

那么,我们怎么把这个map酿成@keyframe动画呢?第一,设定全局的$duration: 17s变量——这将是每个动画的总延续工夫。然后,运用嵌套的Sass @each ... in ... 轮回,我们可以通过对$animations map轮回为每个动画生成预测的CSS @keyframe声明:

@each $animation-name, $animation in $animations {
  // keyframe declaration
  @keyframes #{$animation-name} {
    @each $offsets, $transform in $animation {
      @each $offset in $offsets {
        // offset declaration block    
        #{percentage($offset / $duration)} {
          // transform property
          transform: #{$transform};
        }
      }
    }
  }
}

这将生成如下所示的关键帧:

@keyframes nose {
  14.70588% {
    transform: rotateY(-4deg); }
  23.52941% {
    transform: rotateY(-4deg); }
  29.41176% {
    transform: rotateY(-4deg); }
  41.17647% {
    transform: rotateY(-4deg); }
  26.47059% {
    transform: rotateY(-4deg) rotateX(-3deg); }
  44.11765% {
    transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); }
  52.94118% {
    transform: rotateX(-3deg) rotateY(-28deg) rotateZ(-11deg); }
  55.88235% {
    transform: rotateY(7deg); }
  70.58824% {
    transform: rotateY(7deg); }
  76.47059% {
    transform: rotateY(0); } }

在不运用SCSS的状况下,这些百分比的盘算可能非常繁琐。它们代表动画的每个步骤中每个所需工夫值相关于总$duration的百分比偏移量。

然后可以将动画利用于它们各自的身体部位,例如animation: nose $duration none infinite;。每个动画的延续工夫都得是同样的,这样它们可以无缝轮回。

传神的Easing Curves

制作动画的另一个重要组成局部是看上去要传神,所以要为动画的每个局部细心选中(或新建)Easing Curves。最为生动的Easing Curves是“正弦曲线”——换句话说,是平滑起伏的Easing Curves。这样一来,天然行动就不会生硬地起动或休止,animation-timing-function应当能反映出来。

关于狐狸和哈士奇,我运用cubic-bezier(0.645, 0.045, 0.355, 1)(在这里预览)。此曲线(见下文)开端略快,然后安稳地停住。固然,最佳试验曲线以寻到最适合动画的那种。

最后:在Chrome中,你可以直不雅地检查所有排序的动画,以确保它们在准确的工夫产生。你只需打开控制台,单击Style选项卡,然后单击播放按钮即可:

但愿本教程可以帮忙启发你新建更多的序列CSS动物动画!

更多相干见识,请拜访 百分百源码网!!

以上就是适合初学者学习的CSS3实现招人喜欢的动物的细致内容,更多请关注 百分百源码网 其它相干文章!

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有151人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板