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

本文主要是介绍css大会网站顶部的一个特效，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

看到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);}