0 0 5 8 - 多图标动画特效 1.0,Web密训营,Web开发,鱼C论坛

不二如是 发表于 2017-2-27 14:35:00

0 0 5 8 - 多图标动画特效 1.0

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

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

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

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

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

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

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

★最后用animation展示

套路是一样，但玩法姿势却很新颖呦～

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

很简单，你在@font-face中，指定font-family名字为'FishC-icon';
@font-face {
   font-family:'FishC-icon';
         src: url('font/icons.ttf'), url('font/icons.eot'), url('font/icons.woff'), url('font/icons.svg');
   }
那么在伪元素中就要告诉脚本，劳资就用'FishC-icon'里的图标！

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

   .icon{
         display: inline-block;
         margin-right: 33px;
   }
   .android::before{
   content: "\e65f";
   font-size: 66px;
   font-family: 'FishC-icon';
   }
   .app::before{
         content: "\e660";
         font-size: 66px;
         font-family: 'FishC-icon';
   }
   .page::before{
         content: "\e64d";
         font-size: 66px;
         font-family: 'FishC-icon';
   }
   .show::before{
         content: "\e647";
         font-size: 66px;
         font-family: 'FishC-icon';
   }
   .victor::before{
         content: "\e648";
         font-size: 66px;
         font-family: 'FishC-icon';
   }

</style>
</head>
<body>
<div class="android icon">Android</div>
<div class="app icon">Apple</div>
<div class="page icon">Page</div>
<div class="show icon">Show</div>
<div class="victor icon">Victor</div>
</body>
</html>
效果图：

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

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

现在修改样式
.icon{
         display: inline-block;
         cursor: help;
         width: 111px;
         height: 111px;
         font-size: 0px;
         line-height: 100px;
         border-radius: 50%;/*圆框*/
         background:#7FE;
         color: #000;
         text-align: center;
         animation:move 1s
   }
效果图：

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

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

然后在向上移动回到初始位置，此过程中让图标从完全透明化变为完全不透明。
@keyframes move{
         from{
            opacity: 0;
            transform: translateY(100%);
         }
         to{
            opacity: 1;
            transform: translateY(0%);
         }

   }
效果图：

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

然后使用opacity属性设置图标的透明度，0.0 （完全透明）到 1.0（完全不透明）。

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

既然提到了延迟，那就设置一下咯～

使用animation-delay属性设置延迟：
.android{
         animation-delay: 0s;
   }
   .app{
         animation-delay: .3s;
   }
   .page{
         animation-delay: .6s;
   }
   .show{
         animation-delay: 1.2s;
   }
   .victor{
         animation-delay: 1.5s;
   }
效果图：

光这么直棱棱也不好玩。

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

然后我们自己设置贝塞尔（cubic-bezier）速度曲线，达到不同速率节奏效果{:10_297:} ～

假设你穿越成功，会看到：

拖动粉点（起始点），蓝点（终点）即可以生成坐标。

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

效果图：

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

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

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）

官方 Web 课程：

https://www.bilibili.com/video/BV1QW411N762

shishunfu 发表于 2017-5-8 15:16:22

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多图标元素</title>
<style type="text/css">
@font-face {
font-family:'FishC-icon';
src: url('fonts/icons.ttf'), url('fonts/icons.eot'), url('fonts/icons.woff'), url('fonts/icons.svg');
}
@keyframes move{
from{
opacity: 0;
transform: translateY(100%);
}
to{
opacity: 1;
transform: translateY(0%);
}

}
.android::before{
content: "\e65f";
font-size: 66px;
font-family: 'FishC-icon';
}
.app::before{
content: "\e660";
font-size: 66px;
font-family: 'FishC-icon';
}
.page::before{
content: "\e64d";
font-size: 66px;
font-family: 'FishC-icon';
}
.show::before{
content: "\e647";
font-size: 66px;
font-family: 'FishC-icon';
}
.victor::before{
content: "\e648";
font-size: 66px;
font-family: 'FishC-icon';
}
.icon{
display: inline-block;
margin-left: 22px;
margin-top: 22px;
cursor: pointer;
width: 111px;
height: 111px;
font-size: 0;
line-height: 100px;
border-radius: 50%;/*圆框*/
background:#7FE;
color: #000;
text-align: center;
animation-fill-mode: both;
animation: move 2s cubic-bezier(.86,.15,.18,.9);
}
.android{
animation-delay: 0s;
}
.app{
animation-delay: .3s;
}
.page{
animation-delay: .6s;
}
.show{
animation-delay: 1.2s;
}
.victor{
animation-delay: 1.5s;
}
</style>
</head>
<body>
<div class="android icon">Android</div>
<div class="app icon">Apple</div>
<div class="page icon">Page</div>
<div class="show icon">Show</div>
<div class="victor icon">Victor</div>
</body>
</html>

会魔法的魔法 发表于 2017-4-2 10:54:10

66666666
曲线超好评

aswyamato1989 发表于 2017-7-28 02:18:06

交作业！

AroundTheFire 发表于 2018-1-30 22:49:06

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

         animation-fill-mode: both;
         animation: move 2s cubic-bezier(.86,.15,.18,.9);
   }
   .android::before{
         content: '\e65f';
         font-size: 66px;
         font-family:'icons';
   }
   .apple::before{
         content: '\e660';
         font-family: 'icons';
         font-size: 66px;
   }
   .page::before{
         font-family: 'icons';
         content: '\e64d';
         font-size: 66px;
   }
   .show::before{
         font-family: 'icons';
         content: '\e647';
         font-size: 66px;
   }
   .victor::before{
         font-family: 'icons';
         content: '\e648';
         font-size: 66px;
   }
   @keyframes move {
         from{
            opacity: 0;
            transform: translateY(100%);
         }
         to{
            opacity:1;
            transform: translateY(0);
         }
   }

   /*.icon:hover::before{
         animation : move 1s;
   }*/
   .android{
         animation-delay: 0s;
   }
   .apple{
         animation-delay: .3s;
   }
   .page{
         animation-delay: .6s;
   }
   .show{
         animation-delay: 1.2s;
   }
   .victor{
         animation-delay: 1.5s;
   }

</style>
</head>
<body>
<div class="android icon">Android</div>
<div class="apple icon">Apple</div>
<div class="page icon">Page</div>
<div class="show icon">Show</div>
<div class="victor icon">Victor</div>
</body>
</html>

深入浅出 发表于 2018-4-22 10:15:25

AroundTheFire 发表于 2018-1-30 22:49
感觉交作业的越来越少了，平时有问题还可以参考下同学们的答案，这次没参考出来
所以，我的问题 ...

同学,这节课没讲:hover{:10_277:}

隨鈊乄鎍慾 发表于 2018-6-28 20:04:30

交作业：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图标元素</title>
<style type="text/css">
   @font-face {
         font-family: 'FishC-icon';
         src: url('fonts/icons.ttf'), url('fonts/icons.eot'), url('fonts/icons.woff'), url('fonts/icons.svg');
   }
   .icon{
         font-size:0px;
         display:inline-block;
         margin-right:33px;
         cursor:help;
         width:111px;
         height:111px;
         line-height:100px;
         border-radius:50%;
         background:#7fe;
         color:#000;
         text-align:center;
         animation:move 1s;
         animation-fill-mode: both;
         /*animation: move 2s cubic-bezier(.86,.15,.18,.9);*/
         animation: move 2s cubic-bezier(.16,.75,.96,.28);
   }
      .android::before{
         content:"\e65f";
         font-family: "FishC-icon";
         font-size:66px;
   }
   .app::before {
         content: "\e660";
         font-size: 66px;
         font-family: 'FishC-icon';
   }
   .page::before {
         content: "\e64d";
         font-size: 66px;
         font-family: 'FishC-icon';
   }
   .show::before{
         content: "\e647";
         font-size: 66px;
         font-family: 'FishC-icon';
   }
   .victor::before{
         content: "\e648";
         font-size: 66px;
         font-family: 'FishC-icon';
   }
   @keyframes move{
         from{
            opacity:0;
            transform:translateY(100%);
         }
         to{
            opacity:1;
            transform:translateY(0%);
         }
   }
   .android{
         animation-delay: 0s;
   }
   .app{
         animation-delay: .3s;
   }
   .page{
         animation-delay: .6s;
   }
   .show{
         animation-delay: .9s;
   }
   .victor{
         animation-delay: 1.2s;
   }
</style>
</head>
<body>

<div class="android icon">Android</div>
<div class="app icon">Apple</div>
<div class="page icon">Page</div>
<div class="show icon">Show</div>
<div class="victor icon">Victor</div>
</body>
</html>

睁眼睡大觉 发表于 2019-3-28 15:21:53

这操作好骚，不过好喜欢，学习了。{:10_279:}

你在意在便在 发表于 2019-11-5 16:21:51

每日背标签~{:10_266:}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>让编程改变世界</title>
<style type="text/css">
   /*引用符号字体*/
@font-face {
   font-family: 'icon-font';
   src:url('font/icons.ttf'),
         url('font/icons.eot'),
         url('font/icons.woff'),
         url('font/icons.svg');
}
@keyframes flash{
   from {
            transform:translateY(100%);
            opacity:1;
   }
   to {
            transform:translateY(0%);
            opacity:0;
   }
}
.icon {
   display:inline-block;
   font-size: 0px;
   margin-left: 30px;
   height: 75px;
   width: 75px;
   background: chocolate;
   text-align: center;
   line-height: 75px;
   border-radius:50%;
   cursor:pointer;
   animation: flash 2s infinite alternate;
   /* flash 动画 2秒完成一直循环且会反向播放 */
   animation-fill-mode: both;
}
/* 安卓 e65f app e660 page e64d show e647 Victor e648*/
.android::before {
   font-family: 'icon-font';
   font-size: 55px;
   content:'\e65f';
}
.app::before {
   font-family: 'icon-font';
   font-size: 55px;
   content:'\e660';
}
.page::before {
   font-family: 'icon-font';
   font-size: 55px;
   content:'\e64d';
}
.show::before {
   font-family: 'icon-font';
   font-size: 55px;
   content:'\e647';
}
.victor::before {
   font-family: 'icon-font';
   font-size: 55px;
   content:'\e648';
}
/* 依次浮动 */
.android {
   animation-delay: 0s;
}
.app {
   animation-delay: .3s;
}
.page {
   animation-delay: .6s;
}
.show {
   animation-delay: .9s;
}
.victor {
   animation-delay: 1.2s;
}
</style>

</head>
<body>
   <div class="android icon">Android</div>
   <div class="app icon">Apple</div>
   <div class="page icon">Page</div>
   <div class="show icon">Show</div>
   <div class="victor icon">Victor</div>
</body>
</html>

suweixuan1998 发表于 2020-1-11 00:02:09

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图标元素2</title>
<style type="text/css">
   @font-face {
         font-family:'FishC-icon';
         src: url('fonts/icons.ttf'), url('fonts/icons.eot'), url('fonts/icons.woff'), url('fonts/icons.svg');
   }

   .icon{
         display: inline-block;
         margin-right: 33px;
   }
   .android::before{
         content: "\e65f";
         font-size: 66px;
         font-family: 'FishC-icon';
   }
   .app::before{
         content: "\e660";
         font-size: 66px;
         font-family: 'FishC-icon';
   }
   .page::before{
         content: "\e64d";
         font-size: 66px;
         font-family: 'FishC-icon';
   }
   .show::before{
         content: "\e647";
         font-size: 66px;
         font-family: 'FishC-icon';
   }
   .victor::before{
         content: "\e648";
         font-size: 66px;
         font-family: 'FishC-icon';
   }
   .icon{
         display: inline-block;
         cursor: help;
         width: 111px;
         height: 111px;
         font-size: 0px;
         line-height: 100px;
         border-radius: 50%;/*圆框*/
         background:#7FE;
         color: #000;
         text-align: center;
         animation:move 1s
         animation-fill-mode: both;
         animation: move 2s cubic-bezier(.86,.15,.18,.9);
   }
   @keyframes move{
         from{
            opacity: 0;
            transform: translateY(100%);
         }
         to{
            opacity: 1;
            transform: translateY(0%);
         }

   }
   .android{
         animation-delay: 0s;
   }
   .app{
         animation-delay: .15s;
   }
   .page{
         animation-delay: .63s;
   }
   .show{
         animation-delay: .9s;
   }
   .victor{
         animation-delay: 1.27s;
   }
</style>
</head>
<body>
<div class="android icon">Android</div>
<div class="app icon">Apple</div>
<div class="page icon">Page</div>
<div class="show icon">Show</div>
<div class="victor icon">Victor</div>
</body>

</html>

小脑斧 发表于 2020-3-17 22:52:58

文字也可以这么搞，之前作业里的文字是不是用这个弹出来的{:5_105:}

小脑斧 发表于 2020-3-17 23:03:35

页: [1]

鱼C论坛's Archiver

0 0 5 8 - 多图标动画特效 1.0