0 0 5 6 - 按钮‘最强’动画特效 2.0

不二如是 · 发表于 2017-2-23 11:21:11

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

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

x

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

54初步看到了transition的趣味。

55分析了transition的几个常用玩法。

那么本帖顺理成章，就要：

抛弃一切套路，让有些奇妙的事情自然发生～

还是那个按钮，但是这次我们要加入多个transition动画！

在55源码基础上优化

55.zip (585 Bytes, 下载次数: 61, 售价: 2 鱼币)

先设置左侧内边距，另按钮中文字，偏右。

因为改变内容，所以需要加宽按钮，防止文字分行。

设置按钮position属性为relative，方便后续内部添加绝对定位的元素。

／*其他代码略*／
            width:600px;
            box-sizing: border-box;
            padding-left: 160px;
            position: relative;

效果图：

现在文字就整体偏右了，这样做我们就可以在左边加点有趣的东西了。

我们使用after伪元素创建一个图标。

定位方式采用绝对定位在按钮右侧。

为了演示，这次从外部导入，一个字体。

将字体格式，放在目录下：

添加调用码：

    @font-face {
            font-family: 'icon-font';
            src: url('flat-ui-icons-regular.ttf'), url('flat-ui-icons-regular.eot'), url('flat-ui-icons-regular.woff'), url('flat-ui-icons-regular.svg');
        }

稍微偷了点懒，直接将字体放在目录下，正常开发，应该统一放在文件夹中。

然后调用的时候，在路径中添加文件名font/xxxx.xxx

你如果你对这几个后缀名好奇，请点这里

代码：

     a::after{
            font-family:'icon-font';
            content: '\e607';
            position: absolute;
            right: 85%;
            transition: all .8s;
        }

效果图：

正常开发中，经常通过外部调用flat-UI图标字体，提升效果。

图标搞定后，光秃秃的也不好玩，让他可以滑动摩擦。

    a:hover{
            color:#00AA00;
            background:#555555;
            padding-left: 20px;
            background: rgba(0,0,0,.6);
        }
        a:hover::after{
            right: 6%;
        }

效果图：

设置鼠标滑过按钮时，左侧内边距缩小，这样字体部分就会往左跑。

背景色用60%透明度，提升体验。

最后为鼠标指针滑动下after伪元素设置新的属性。

向右移动，并停止在右边整体宽度6%的位置。

注意伪元素的hover写法：

游客，如果您要查看本帖隐藏内容请回复

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

）

官方 Web 课程：

shishunfu · 发表于 2017-5-4 16:00:55

不想安装字体，图标点显示出来一个框框

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>超链接动画演示</title>
        <style type="text/css">
                body{
                        margin-top: 333px;
                        margin-left: 333px;
                        text-align: center;
                }
                span{
                        color: red;
                        font-size: 40px;
                        font-family: "Comic Sans MS", cursive;
                }
                a{
                        color: #FFF;
                        font-size: 40px;
                        text-decoration: none;
                        font-family: "Comic Sans MS", cursive;
                        transition: all 2.6s ease;

                        display: block;
                        height: 66px;
                        border: 1px solid #FF0088;
                        line-height: 66px;
                        border-radius: 6px;

                        width:600px;
                        box-sizing: border-box;
                        padding-left: 160px;
                        position: relative;
                }
                a:hover{
                        color:#00AA00;
                        background:#555555;
                        padding-left: 20px;
                        background: rgba(0,0,0,.6);
                        /*
                        设置鼠标滑过按钮时，左侧内边距缩小，这样字体部分就会往左跑。
                        背景色用60%透明度，提升体验。
                        */
                }
                a:hover::after{
                        right: 6%;
                        /*
                        最后为鼠标指针滑动下after伪元素设置新的属性。
                        向右移动，并停止在右边整体宽度6%的位置。
                        */
                }
                @font-face {
                        font-family: 'icon-font';
                        /*src: url('flat-ui-icons-regular.ttf'), url('flat-ui-icons-regular.eot'), url('flat-ui-icons-regular.woff'), url('flat-ui-icons-regular.svg');*/
                }
                a::after{
                        /*font-family:'icon-font';*/
                        content: '\e607';
                        position: absolute;
                        right: 85%;
                        transition: all .8s;
                }
        </style>
</head>
<body>
        <a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539">HTML5-庖丁解牛</a>
</body>
</html>

a540656809 · 发表于 2017-3-7 00:03:44

编程还是设计师？

163areocraft · 发表于 2017-3-7 17:30:47

Xman · 发表于 2017-3-28 14:46:54

疯样的篮子 · 发表于 2017-3-31 22:42:33

求问为什么我按操作做，用IE或者chrome打开，整个块长度变化

不二如是 · 发表于 2017-4-1 09:24:39

疯样的篮子发表于 2017-3-31 22:42
求问为什么我按操作做，用IE或者chrome打开，整个块长度变化

建议发求助帖，方便把代码贴出话来

疯样的篮子 · 发表于 2017-4-1 17:50:13

不二如是发表于 2017-4-1 09:24
建议发求助帖，方便把代码贴出话来

好像直接用你的代码问题就没有了~~~~~~~~监介......

dreamdnj · 发表于 2017-4-11 08:03:13

支持！！！！！！！！

不二如是 · 发表于 2017-4-11 09:46:29

dreamdnj 发表于 2017-4-11 08:03
支持！！！！！！！！

谢谢～

aswyamato1989 · 发表于 2017-7-27 07:56:04

回复看帖

aswyamato1989 · 发表于 2017-7-27 08:05:02

交作业！

白白白zzz · 发表于 2017-7-30 14:15:57

...真的丑正式项目不可能用

庚午 · 发表于 2018-1-24 20:59:18

helingyuan · 发表于 2018-2-20 11:31:20

支持学习了！

高冷 · 发表于 2018-3-25 16:14:27

嵊州第一帅 · 发表于 2018-5-11 13:40:04

学一下。。。。

c调小白 · 发表于 2018-5-15 21:05:18

c调小白 · 发表于 2018-5-15 21:07:43

：haver 是伪类选择器：：after是伪元素选择器

谁将新樽盛旧月 · 发表于 2018-5-17 23:07:44

大佬

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 5 6 - 按钮‘最强’动画特效 2.0

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

评分

本帖被以下淘专辑推荐:

点评

评分

评分