記事特集学ぶダウンロードに質問プログラミング辞典ゲーム最近の更新

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

CSS3_html/css_WEB-ITnose を使用したフェードアウトトランジション効果

WBOY

リリース： 2016-06-24 11:50:55

オリジナル

784 人が閲覧しました

概要:

CSS3 は多くの Web サイトに適用されており、動的なインタラクティブな Web サイトの作成に非常に役立ちます。今日はトランジションを使用したマウスホバー時のフェードアウト効果を共有します。

コード:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        div.demo {          float: left;          border:1px solid #ccc;        }        div.demo i {          cursor: pointer;          height: 50px;          transition: opacity 2s;          width: 50px;          background: #000;          float: left;          margin: 5px;          opacity: 0;        }        div.demo i:hover {          opacity: 1;          transition-duration: 0s;        }    </style></head><body>    <div class="demo">        <div>            <i></i>            <i></i>            <i></i>            <i></i>            <i></i>            <i></i>            <i></i>            <i></i>        </div>    </div></body></html>

ログイン後にコピー

効果:

カーソルを置くと効果が表示されます