鱼C论坛

 找回密码
 立即注册
查看: 2687|回复: 13

[庖丁解牛] 0 0 5 8 - 多图标动画特效 1.0

[复制链接]
发表于 2017-2-27 14:35:00 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2021-8-11 09:35 编辑

57介绍了单图标的animation属性。

这对于含有100多个图标的svg文件,岂不是一种浪费!

这次我们展示多个图标动画特效

从套路方面讲,没什么本质变化。

★通过@font-face加载字体文件。

★通过@keyframes设置动画效果。

★最后用animation展示


套路是一样,但玩法姿势却很新颖呦~

上次有鱼油问我,为什么不写font-family,就调用不了图标。

很简单,你在@font-face中,指定font-family名字为'FishC-icon';
  1.    @font-face {
  2.               font-family:'FishC-icon';
  3.             src: url('font/icons.ttf'), url('font/icons.eot'), url('font/icons.woff'), url('font/icons.svg');
  4.         }
复制代码

那么在伪元素中就要告诉脚本,劳资就用'FishC-icon'里的图标!

这次因为有多个动画对象,所以用延迟参数形成动画序列,先写5个div吧
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>图标元素2</title>
  6.     <style type="text/css">
  7.         @font-face {
  8.             font-family:'FishC-icon';
  9.             src: url('font/icons.ttf'), url('font/icons.eot'), url('font/icons.woff'), url('font/icons.svg');
  10.         }

  11.         .icon{
  12.             display: inline-block;
  13.             margin-right: 33px;
  14.         }
  15.         .android::before{
  16.         content: "\e65f";
  17.         font-size: 66px;
  18.         font-family: 'FishC-icon';
  19.         }
  20.         .app::before{
  21.             content: "\e660";
  22.             font-size: 66px;
  23.             font-family: 'FishC-icon';
  24.         }
  25.         .page::before{
  26.             content: "\e64d";
  27.             font-size: 66px;
  28.             font-family: 'FishC-icon';
  29.         }
  30.         .show::before{
  31.             content: "\e647";
  32.             font-size: 66px;
  33.             font-family: 'FishC-icon';
  34.         }
  35.         .victor::before{
  36.             content: "\e648";
  37.             font-size: 66px;
  38.             font-family: 'FishC-icon';
  39.         }

  40.     </style>
  41. </head>
  42. <body>
  43.     <div class="android icon">Android</div>
  44.     <div class="app icon">Apple</div>
  45.     <div class="page icon">Page</div>
  46.     <div class="show icon">Show</div>
  47.     <div class="victor icon">Victor</div>
  48. </body>
  49. </html>
复制代码

效果图:
Snip20170226_558.png


此时由于没有隐藏文字,这是上一讲的点睛之笔,有兴趣自己去找。

但不同之处在于此处的图标都设置为“inline-block”,使之能够横向排列。


现在修改样式
  1. .icon{
  2.             display: inline-block;
  3.             cursor: help;
  4.             width: 111px;
  5.             height: 111px;
  6.             font-size: 0px;
  7.             line-height: 100px;
  8.             border-radius: 50%;/*圆框*/
  9.             background:#7FE;
  10.             color: #000;
  11.             text-align: center;
  12.             animation:move 1s
  13.         }
复制代码

效果图:
1.gif


其他功能见57,重点为图标添加“animation”动画,方便后续添加动作。

例如,使图标位置向下偏移-100%。

然后在向上移动回到初始位置,此过程中让图标从完全透明化变为完全不透明
  1.      @keyframes move{
  2.             from{
  3.                 opacity: 0;
  4.                 transform: translateY(100%);
  5.             }
  6.             to{
  7.                 opacity: 1;
  8.                 transform: translateY(0%);
  9.             }

  10.         }
复制代码

效果图:
1.gif


利用transform属性的translateY方法来实现图标的向下偏移。

然后使用opacity属性设置图标的透明度,0.0 (完全透明)到 1.0(完全不透明)。

由于未设置单个图标的延迟,所以一下子5个同时出现。

既然提到了延迟,那就设置一下咯~

使用animation-delay属性设置延迟:
  1. .android{
  2.             animation-delay: 0s;
  3.         }
  4.         .app{
  5.             animation-delay: .3s;
  6.         }
  7.         .page{
  8.             animation-delay: .6s;
  9.         }
  10.         .show{
  11.             animation-delay: 1.2s;
  12.         }
  13.         .victor{
  14.             animation-delay: 1.5s;
  15.         }
复制代码

效果图:
1.gif


光这么直棱棱也不好玩。

推荐一个在线可视化函数的网站,传送门

然后我们自己设置贝塞尔(cubic-bezier)速度曲线,达到不同速率节奏效果

假设你穿越成功,会看到:
Snip20170227_574.png


拖动粉点(起始点),蓝点(终点)即可以生成坐标。
1.gif


生成的结果为cubic-bezier(.86,.15,.18,.9)。
  1. .icon{
  2.             animation-fill-mode: both;
  3.             animation: move 2s cubic-bezier(.86,.15,.18,.9);
  4.         }
复制代码


效果图:
1.gif


其中animation-fill-mode属性用来属性规定动画在播放之前或之后,其动画效果是否可见。

Snip20170227_575.png


设置完成后,防止图标闪现。

这位鱼油,如果喜欢本帖子,请订阅 专辑-->传送门)(不喜欢更要订阅


官方 Web 课程:

评分

参与人数 2荣誉 +10 鱼币 +10 贡献 +5 收起 理由
睦ちゃん她爹 + 5 + 5 + 3 感谢楼主无私奉献!
alltolove + 5 + 5 + 2 支持楼主!

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-5-8 15:16:22 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>多图标元素</title>
  6.         <style type="text/css">
  7.                 @font-face {
  8.                         font-family:'FishC-icon';
  9.                         src: url('fonts/icons.ttf'), url('fonts/icons.eot'), url('fonts/icons.woff'), url('fonts/icons.svg');
  10.                 }
  11.                 @keyframes move{
  12.                         from{
  13.                                 opacity: 0;
  14.                                 transform: translateY(100%);
  15.                         }
  16.                         to{
  17.                                 opacity: 1;
  18.                                 transform: translateY(0%);
  19.                         }

  20.                 }
  21.                 .android::before{
  22.                         content: "\e65f";
  23.                         font-size: 66px;
  24.                         font-family: 'FishC-icon';
  25.                 }
  26.                 .app::before{
  27.                         content: "\e660";
  28.                         font-size: 66px;
  29.                         font-family: 'FishC-icon';
  30.                 }
  31.                 .page::before{
  32.                         content: "\e64d";
  33.                         font-size: 66px;
  34.                         font-family: 'FishC-icon';
  35.                 }
  36.                 .show::before{
  37.                         content: "\e647";
  38.                         font-size: 66px;
  39.                         font-family: 'FishC-icon';
  40.                 }
  41.                 .victor::before{
  42.                         content: "\e648";
  43.                         font-size: 66px;
  44.                         font-family: 'FishC-icon';
  45.                 }
  46.                 .icon{
  47.                         display: inline-block;
  48.                         margin-left: 22px;
  49.                         margin-top: 22px;
  50.                         cursor: pointer;
  51.                         width: 111px;
  52.                         height: 111px;
  53.                         font-size: 0;
  54.                         line-height: 100px;
  55.                         border-radius: 50%;/*圆框*/
  56.                         background:#7FE;
  57.                         color: #000;
  58.                         text-align: center;
  59.                         animation-fill-mode: both;
  60.                         animation: move 2s cubic-bezier(.86,.15,.18,.9);
  61.                 }
  62.                 .android{
  63.                         animation-delay: 0s;
  64.                 }
  65.                 .app{
  66.                         animation-delay: .3s;
  67.                 }
  68.                 .page{
  69.                         animation-delay: .6s;
  70.                 }
  71.                 .show{
  72.                         animation-delay: 1.2s;
  73.                 }
  74.                 .victor{
  75.                         animation-delay: 1.5s;
  76.                 }
  77.         </style>
  78. </head>
  79. <body>
  80.         <div class="android icon">Android</div>
  81.         <div class="app icon">Apple</div>
  82.         <div class="page icon">Page</div>
  83.         <div class="show icon">Show</div>
  84.         <div class="victor icon">Victor</div>
  85. </body>
  86. </html>
复制代码
0046.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-7-28 08:23

评分

参与人数 1鱼币 +6 收起 理由
不二如是 + 6

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-4-2 10:54:10 | 显示全部楼层
66666666
曲线超好评
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-28 02:18:06 | 显示全部楼层
交作业!
058.jpg

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-7-28 08:23

评分

参与人数 2荣誉 +3 鱼币 +11 贡献 +3 收起 理由
STmove + 3 + 5 + 3
不二如是 + 6 热爱鱼C^_^

查看全部评分

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-1-30 22:49:06 | 显示全部楼层
感觉交作业的越来越少了,平时有问题还可以参考下同学们的答案,这次没参考出来
所以,我的问题是,刷新网页才会出现效果,而不是鼠标移动触发效果
自己尝试着用hover伪类选择器修改,但是还是没改明白
请赐教。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>伍拾捌</title>
  6.     <style type="text/css">
  7.         @font-face{
  8.             font-family: 'icons';
  9.             src: url('font/icons.svg'),url('font/icons.ttf'),url('font/icons.otf'),url('font/icons.woff'),url('font/icons.eot');
  10.         }
  11.         .icon{
  12.             font-size:0px;
  13.             display: inline-block;
  14.             height: 111px;
  15.             width: 111px;
  16.             line-height: 111px;
  17.             border-radius: 50%;
  18.             background: #00ffff;
  19.             color: #000;
  20.             text-align: center;

  21.             animation-fill-mode: both;
  22.             animation: move 2s cubic-bezier(.86,.15,.18,.9);
  23.         }
  24.         .android::before{
  25.             content: '\e65f';
  26.             font-size: 66px;
  27.             font-family:'icons';
  28.         }
  29.         .apple::before{
  30.             content: '\e660';
  31.             font-family: 'icons';
  32.             font-size: 66px;
  33.         }
  34.         .page::before{
  35.             font-family: 'icons';
  36.             content: '\e64d';
  37.             font-size: 66px;
  38.         }
  39.         .show::before{
  40.             font-family: 'icons';
  41.             content: '\e647';
  42.             font-size: 66px;
  43.         }
  44.         .victor::before{
  45.             font-family: 'icons';
  46.             content: '\e648';
  47.             font-size: 66px;
  48.         }
  49.         @keyframes move {
  50.             from{
  51.                 opacity: 0;
  52.                 transform: translateY(100%);
  53.             }
  54.             to{
  55.                 opacity:1;
  56.                 transform: translateY(0);
  57.             }
  58.         }

  59.         /*.icon:hover::before{
  60.             animation : move 1s;
  61.         }*/
  62.         .android{
  63.             animation-delay: 0s;
  64.         }
  65.         .apple{
  66.             animation-delay: .3s;
  67.         }
  68.         .page{
  69.             animation-delay: .6s;
  70.         }
  71.         .show{
  72.             animation-delay: 1.2s;
  73.         }
  74.         .victor{
  75.             animation-delay: 1.5s;
  76.         }

  77.     </style>
  78. </head>
  79. <body>
  80.     <div class="android icon">Android</div>
  81.     <div class="apple icon">Apple</div>
  82.     <div class="page icon">Page</div>
  83.     <div class="show icon">Show</div>
  84.     <div class="victor icon">Victor</div>
  85. </body>
  86. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-4-22 10:15:25 | 显示全部楼层
AroundTheFire 发表于 2018-1-30 22:49
感觉交作业的越来越少了,平时有问题还可以参考下同学们的答案,这次没参考出来
所以,我的问题 ...

同学,这节课没讲:hover
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-6-28 20:04:30 | 显示全部楼层
交作业:
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>图标元素</title>
  6.     <style type="text/css">
  7.         @font-face {
  8.             font-family: 'FishC-icon';
  9.             src: url('fonts/icons.ttf'), url('fonts/icons.eot'), url('fonts/icons.woff'), url('fonts/icons.svg');
  10.         }
  11.         .icon{
  12.             font-size:0px;
  13.             display:inline-block;
  14.             margin-right:33px;
  15.             cursor:help;
  16.             width:111px;
  17.             height:111px;
  18.             line-height:100px;
  19.             border-radius:50%;
  20.             background:#7fe;
  21.             color:#000;
  22.             text-align:center;
  23.             animation:move 1s;
  24.             animation-fill-mode: both;
  25.             /*animation: move 2s cubic-bezier(.86,.15,.18,.9);*/
  26.             animation: move 2s cubic-bezier(.16,.75,.96,.28);
  27.         }
  28.          .android::before{
  29.             content:"\e65f";
  30.             font-family: "FishC-icon";
  31.             font-size:66px;
  32.         }
  33.         .app::before {
  34.             content: "\e660";
  35.             font-size: 66px;
  36.             font-family: 'FishC-icon';
  37.         }
  38.         .page::before {
  39.             content: "\e64d";
  40.             font-size: 66px;
  41.             font-family: 'FishC-icon';
  42.         }
  43.         .show::before{
  44.             content: "\e647";
  45.             font-size: 66px;
  46.             font-family: 'FishC-icon';
  47.         }
  48.         .victor::before{
  49.             content: "\e648";
  50.             font-size: 66px;
  51.             font-family: 'FishC-icon';
  52.         }
  53.         @keyframes move{
  54.             from{
  55.                 opacity:0;
  56.                 transform:translateY(100%);
  57.             }
  58.             to{
  59.                 opacity:1;
  60.                 transform:translateY(0%);
  61.             }
  62.         }
  63.         .android{
  64.             animation-delay: 0s;
  65.         }
  66.         .app{
  67.             animation-delay: .3s;
  68.         }
  69.         .page{
  70.             animation-delay: .6s;
  71.         }
  72.         .show{
  73.             animation-delay: .9s;
  74.         }
  75.         .victor{
  76.             animation-delay: 1.2s;
  77.         }
  78.     </style>
  79. </head>
  80. <body>
  81.     <!--<div class="icon">icon</div>-->
  82.     <div class="android icon">Android</div>
  83.     <div class="app icon">Apple</div>
  84.     <div class="page icon">Page</div>
  85.     <div class="show icon">Show</div>
  86.     <div class="victor icon">Victor</div>
  87. </body>
  88. </html>
复制代码

58.gif
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-3-28 15:21:53 | 显示全部楼层
这操作好骚,不过好喜欢,学习了。
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-11-5 16:21:51 | 显示全部楼层
每日背标签~
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>让编程改变世界</title>
  6. <style type="text/css">
  7.         /*引用符号 字体*/
  8. @font-face {
  9.         font-family: 'icon-font';
  10.         src:url('font/icons.ttf'),
  11.             url('font/icons.eot'),
  12.             url('font/icons.woff'),
  13.             url('font/icons.svg');
  14. }
  15. @keyframes flash{
  16.         from {
  17.                 transform:translateY(100%);
  18.                 opacity:1;
  19.         }
  20.         to {
  21.                 transform:translateY(0%);
  22.                 opacity:0;
  23.         }
  24. }
  25. .icon {
  26.         display:inline-block;
  27.         font-size: 0px;
  28.         margin-left: 30px;
  29.         height: 75px;
  30.         width: 75px;
  31.         background: chocolate;
  32.         text-align: center;
  33.         line-height: 75px;
  34.         border-radius:50%;
  35.         cursor:pointer;
  36.         animation: flash 2s infinite alternate;
  37.         /* flash 动画 2秒完成 一直循环 且会反向播放 */
  38.         animation-fill-mode: both;
  39. }
  40. /* 安卓 e65f app e660 page e64d show e647 Victor e648*/
  41. .android::before {
  42.         font-family: 'icon-font';
  43.         font-size: 55px;
  44.         content:'\e65f';
  45. }
  46. .app::before {
  47.         font-family: 'icon-font';
  48.         font-size: 55px;
  49.         content:'\e660';
  50. }
  51. .page::before {
  52.         font-family: 'icon-font';
  53.         font-size: 55px;
  54.         content:'\e64d';
  55. }
  56. .show::before {
  57.         font-family: 'icon-font';
  58.         font-size: 55px;
  59.         content:'\e647';
  60. }
  61. .victor::before {
  62.         font-family: 'icon-font';
  63.         font-size: 55px;
  64.         content:'\e648';
  65. }
  66. /* 依次浮动 */
  67. .android {
  68.         animation-delay: 0s;
  69. }
  70. .app {
  71.         animation-delay: .3s;
  72. }
  73. .page {
  74.         animation-delay: .6s;
  75. }
  76. .show {
  77.         animation-delay: .9s;
  78. }
  79. .victor {
  80.         animation-delay: 1.2s;
  81. }
  82. </style>

  83. </head>
  84. <body>
  85.         <div class="android icon">Android</div>
  86.         <div class="app icon">Apple</div>
  87.         <div class="page icon">Page</div>
  88.         <div class="show icon">Show</div>
  89.         <div class="victor icon">Victor</div>
  90. </body>
  91. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-1-11 00:02:09 | 显示全部楼层
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>图标元素2</title>
  6.     <style type="text/css">
  7.         @font-face {
  8.             font-family:'FishC-icon';
  9.             src: url('fonts/icons.ttf'), url('fonts/icons.eot'), url('fonts/icons.woff'), url('fonts/icons.svg');
  10.         }

  11.         .icon{
  12.             display: inline-block;
  13.             margin-right: 33px;
  14.         }
  15.         .android::before{
  16.             content: "\e65f";
  17.             font-size: 66px;
  18.             font-family: 'FishC-icon';
  19.         }
  20.         .app::before{
  21.             content: "\e660";
  22.             font-size: 66px;
  23.             font-family: 'FishC-icon';
  24.         }
  25.         .page::before{
  26.             content: "\e64d";
  27.             font-size: 66px;
  28.             font-family: 'FishC-icon';
  29.         }
  30.         .show::before{
  31.             content: "\e647";
  32.             font-size: 66px;
  33.             font-family: 'FishC-icon';
  34.         }
  35.         .victor::before{
  36.             content: "\e648";
  37.             font-size: 66px;
  38.             font-family: 'FishC-icon';
  39.         }
  40.         .icon{
  41.             display: inline-block;
  42.             cursor: help;
  43.             width: 111px;
  44.             height: 111px;
  45.             font-size: 0px;
  46.             line-height: 100px;
  47.             border-radius: 50%;/*圆框*/
  48.             background:#7FE;
  49.             color: #000;
  50.             text-align: center;
  51.             animation:move 1s
  52.             animation-fill-mode: both;
  53.             animation: move 2s cubic-bezier(.86,.15,.18,.9);
  54.         }
  55.         @keyframes move{
  56.             from{
  57.                 opacity: 0;
  58.                 transform: translateY(100%);
  59.             }
  60.             to{
  61.                 opacity: 1;
  62.                 transform: translateY(0%);
  63.             }

  64.         }
  65.         .android{
  66.             animation-delay: 0s;
  67.         }
  68.         .app{
  69.             animation-delay: .15s;
  70.         }
  71.         .page{
  72.             animation-delay: .63s;
  73.         }
  74.         .show{
  75.             animation-delay: .9s;
  76.         }
  77.         .victor{
  78.             animation-delay: 1.27s;
  79.         }
  80.     </style>
  81. </head>
  82. <body>
  83. <div class="android icon">Android</div>
  84. <div class="app icon">Apple</div>
  85. <div class="page icon">Page</div>
  86. <div class="show icon">Show</div>
  87. <div class="victor icon">Victor</div>
  88. </body>

  89. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-17 22:52:58 | 显示全部楼层
文字也可以这么搞,之前作业里的文字是不是用这个弹出来的
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-17 23:03:35 | 显示全部楼层

花.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 18:45

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表