设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › Web密训营 › 0 0 5 8 - 多图标动画特效 1.0
返回列表 发新帖
查看: 2888|回复: 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';
   @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>
效果图：
Snip20170226_558.png


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

但不同之处在于此处的图标都设置为“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
        }
效果图：
1.gif


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

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

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

        }
效果图：
1.gif


利用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;
        }
效果图：
1.gif


光这么直棱棱也不好玩。

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

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

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


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


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

效果图：
1.gif


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

Snip20170227_575.png


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

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


官方 Web 课程：

评分

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

查看全部评分

本帖被以下淘专辑推荐:

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

使用道具 举报

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>
0046.png

点评

我很赞同！: 5.0
不二如是
我很赞同！: 5
  发表于 2017-7-28 08:23

评分

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

查看全部评分

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

使用道具 举报

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

使用道具 举报

aswyamato1989
发表于 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
回复 支持 反对

使用道具 举报

AroundTheFire
发表于 2018-1-30 22:49:06 | 显示全部楼层
感觉交作业的越来越少了，平时有问题还可以参考下同学们的答案，这次没参考出来
所以，我的问题是，刷新网页才会出现效果，而不是鼠标移动触发效果
自己尝试着用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>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

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

使用道具 举报

隨鈊乄鎍慾
发表于 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="icon">icon</div>-->
    <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>
58.gif
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

使用道具 举报

你在意在便在
发表于 2019-11-5 16:21:51 | 显示全部楼层
每日背标签~
<!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>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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>
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

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

使用道具 举报

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

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

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-11-22 09:12

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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