zoukankan      html  css  js  c++  java
  • css大会站点顶部的一个特效

    看到http://css.w3ctech.com/ 上一个效果认为挺赞的。

    然后学些了一下。

    demo地址:http://codepen.io/tianzi77/pen/mJaLWq

    html结构非常easy,就是一个p,2个span标签嵌套在a标签里面。

        <a href="/" class="link-mallki">
                思君子兮未敢言 zhuangjia 
                <span data-letters="思君子兮未敢言 zhuangjia"></span>
                <span data-letters="思君子兮未敢言 zhuangjia"></span>
              </a>

    样式有点复杂,整体是利用动画,伪类hover前后的样式进行变化出现炫酷的效果:

            body {
                background: black;
            }
    
            a {
                display: inline-block;
                font-size: 60px;
                margin: 30px 0 20px;
            }
    
            [class*="link-"] {
                outline: none;
                text-decoration: none;
                position: relative;
                line-height: 1;
                display: inline-block;
            }
    
            .link-mallki {
                color:#fff;
                -webkit-transition: color 0.5s 0.25s;
                transition: color 0.5s 0.25s;
                overflow: hidden;
            }
    
            .link-mallki:hover {
                -webkit-transition: none;
                transition: none;
                color: transparent;
            }
    
            .link-mallki::before {
                content: '';
                width: 100%;
                height: 2px;
                margin: -3px 0 0 0;
                background: #fff;
                position: absolute;
                left: 0;
                top: 50%;
                -webkit-transform: translate3d(-100%, 0, 0);
                transform: translate3d(-100%, 0, 0);
                -webkit-transition: -webkit-transform 0.4s;
                transition: transform 0.4s;
                -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
                transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
            }
    
            .link-mallki:hover::before {
                -webkit-transform: translate3d(100%, 0, 0);
                transform: translate3d(100%, 0, 0);
            }
    
            .link-mallki span {
                position: absolute;
                height: 50%;
                width: 100%;
                left: 0;
                top: 0;
                overflow: hidden;
            }
    
            .link-mallki span::before {
                content: attr(data-letters);
                position: absolute;
                left: 0;
                width: 100%;
                color: #abcdef;
                -webkit-transition: -webkit-transform 0.5s;
                transition: transform 0.5s;
            }
    
            .link-mallki span:nth-child(2) {
                top: 50%;
            }
    
            .link-mallki span:first-child::before {
                top: 0;
                -webkit-transform: translate3d(0, 100%, 0);
                transform: translate3d(0, 100%, 0);
            }
    
            .link-mallki span:nth-child(2)::before {
                bottom: 0;
                -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
            }
    
            .link-mallki:hover span::before {
                -webkit-transition-delay: 0.3s;
                transition-delay: 0.3s;
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
                -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
                transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
            }
  • 相关阅读:
    b_lg_选学霸(并查集+01背包)
    b_lq_小明的魔法(反向思维)
    多测师课堂019_第一个月综合面试题(01) _高级讲师肖sir
    多测师课堂017_项目数据 _高级讲师肖sir
    linux whoami 显示当前用户的用户名
    linux shutdown 命令 关机 重启
    linux reboot 重启命令
    linux基础 目录
    linux uname 命令 打印系统信息
    前端 CSS层叠性 CSS选择器优先级
  • 原文地址:https://www.cnblogs.com/yutingliuyl/p/7016073.html
Copyright © 2011-2022 走看看