ホームページ >ウェブフロントエンド >htmlチュートリアル >マウスホバリングと div フェードインおよびフェードアウトの CSS3 実装 Effects_html/css_WEB-ITnose
マウスホバリングと div フェードインおよびフェードアウトの CSS3 実装 Effects_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:27:442069ブラウズ
マウスがホバリングして div から離れていくときのフェードインおよびフェードアウト効果の CSS3 実装:
この章では、マウスがホバーしているときに CSS3 を使用してフェードインおよびフェードアウト効果を実現する方法を紹介します。ホバリングして div から遠ざかります。
コード例は次のとおりです。
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</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> 上記のコードは、マウスをホバーすると、要素のフェードインおよびフェードアウト効果を実現できます。
もちろん、これは div ではなく 5a8028ccc7a7e27417bff9f05adf5932 要素です。もちろん、div は問題ではなく、単にデモンストレーションのためのものです。
transition-duration 属性については、CSS3 のtransition-duration 属性の詳細な説明を参照してください。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=16813
詳細については、以下を参照してください: http://www.softwhy.com/divcss/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。