Home > Web Front-end > HTML Tutorial > A special effect at the top of the css conference website_html/css_WEB-ITnose

A special effect at the top of the css conference website_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:39:37
Original
1232 people have browsed it

I saw the previous effect at http://css.w3ctech.com/ and thought it was quite good.

Then I learned a little bit.

Demo address: http://codepen.io/tianzi77/pen/mJaLWq

The html structure is very simple, just a p and 2 span tags nested inside the a tag.

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

The style is a bit complicated. Generally, it uses animation and pseudo-hover styles to change the style before and after to produce a cool effect:

        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); }
Copy after login

Copyright statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template