css大会网站顶部的一个特效

来源：互联网发布：淘宝开店协议点同意编辑：程序博客网时间：2024/06/05 02:58

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

然后学些了一下。

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

html结构很简单，就是一个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);        }

3 0