ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3_html/css_WEB-ITnose を使用したフェードアウトトランジション効果
CSS3_html/css_WEB-ITnose を使用したフェードアウトトランジション効果
- WBOYオリジナル
- 2016-06-24 11:50:55830ブラウズ
概要:
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> 効果:
カーソルを置くと効果が表示されます
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。