CSS カンファレンスのウェブサイト上部の特殊効果_html/css_WEB-ITnose

http://css.w3ctech.com/ で前のエフェクトを見て、非常に印象的だと思いました。

それから私は少し学びました。

デモのアドレス: http://codepen.io/tianzi77/pen/mJaLWq

HTML の構造は非常に単純で、a タグ内にネストされた p タグと 2 つの spam タグだけです。

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

スタイルは少し複雑です。通常、アニメーションと疑似ホバー スタイルを使用して前後のスタイルを変更し、クールな効果を生み出します:

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

著作権表示: この記事はブロガーによるオリジナルの記事です。ブロガーの許可なく転載することはできません。