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

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

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

54初步看到了transition的趣味。

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

那么本帖顺理成章,就要:

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

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

在55源码基础上优化

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

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

设置按钮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写法:

**** Hidden Message *****

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

官方 Web 课程:

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

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

{:10_260:}不想安装字体,图标点显示出来一个框框{:10_266:}
<!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

111

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

111

疯样的篮子 发表于 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

{:9_232:}

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

{:10_330:}

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

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

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

大佬
页: [1] 2 3
查看完整版本: 0 0 5 6 - 按钮‘最强’动画特效 2.0