自定义超链接动画---transition

沈俭发布于2019-04-23 11:40 / 1157人阅读

效果图：

<a href="#">
    <span>HTMLspan>
a>

a {
            position: relative;
            text-decoration: none;
            display: block;
            text-align: center;
            width: 200px;
        }
        
        /* 绘制上下线条 */
        a::before,
        a::after{
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            transition: width .2s ease-in-out;
            background: #92B901;
        }
        
        /* 固定线条方向 */
        a::before{
            top: 0;
            left: 0;
        }
        a::after{
            bottom: 0;
            right: 0;
        }
        
        /* 过滤效果 */
        a:hover::before,
        a:hover::after{
            width: 0;
        }
        
        
        a span{
            display: block;
            padding: 20px;
        }

        /* 绘制左右线条 */
        a span::before,
        a span::after{
            content: "";
            position: absolute;
            width: 2px;
            height: 100%;
            transition: height .2s ease;
            background: #92B901;
        }
        a span::before{
            bottom: 0;
            left: 0;
        }
        a span::after{
            top: 0;
            right: 0;
        }
        a span:hover::before,
        a span:hover::after{
            height: 0;
        }

混合云 idc机房托管自定义头像自定义网站自定义自定义按钮

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1005.html

Vue.js 实践（3）：实现一个漂亮、灵活、可复用的提示组件

摘要：接下来，由简入繁依次实现提示组件的各个功能。那么第一个提示的定时器依然会错误的关闭新提示。增强灵活性最后则是让提示组件更灵活。这次的教程里，我们要把组件化进行到底！最近半年的几个项目中，都遇到了需要使用Toast或者Notification组件的情况。在目前已有的一些基于Vue.js开发的组件库，都没有找到太合适的，所以自己重头实现了一个。历经几个项目的磨练，这个提示组件的功能已经越...

Olivia 2019-08-19 18:46 评论0 收藏0
iOS链式动画、Spring动画，TimingFunction扩展

showImg(https://segmentfault.com/img/remote/1460000008096628?w=2048&h=341); showImg(https://segmentfault.com/img/remote/1460000008096629?w=1266&h=82); Summary AXAnimationChain是一个链式动画库，可以用来轻松的创建基于CAAni...

wind5o 2019-06-25 15:56 评论0 收藏0
Vue.js基础教程

摘要：自定义名称縮放控制器可以使用中的动画设计更为华丽的效果。在和中必须使用，不然它们会同时生效，动画也会瞬间完成。先在标签内加入，接着类似自定义动画可以给命名。文章链接：Vue.js基础教程开发工具准备：根据个人喜欢选择IDE，我使用的是WebStorm，推荐使用Atom和VSCode；安装git base和node.js；安装vue-cli，命令npm i -g @vue/...

XboxYan 2019-08-23 15:24 评论0 收藏0
简易实践的vue自定义tab入门

摘要：在元素被插入之前生效，在元素被插入之后的下一帧移除。定义进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。我们用特性来扩展，从而达到可以在这些受限制的元素中使用。本文基于vue官方文档，分别为：动态组件 & 异步组件、插槽、进入/离开 & 列表过渡章节链接描述要想实现tab动画，首先要了解vue中哪些元素/那些组件适合在那些条件下实现动画效果条件渲...

Benedict Evans 2019-08-23 13:55 评论0 收藏0
简易实践的vue自定义tab入门

摘要：在元素被插入之前生效，在元素被插入之后的下一帧移除。定义进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。我们用特性来扩展，从而达到可以在这些受限制的元素中使用。本文基于vue官方文档，分别为：动态组件 & 异步组件、插槽、进入/离开 & 列表过渡章节链接描述要想实现tab动画，首先要了解vue中哪些元素/那些组件适合在那些条件下实现动画效果条件渲...

Cc_2011 2019-08-02 12:12 评论0 收藏0