ホームページ > 記事 > ウェブフロントエンド > CSS3_html/css_WEB-ITnose に基づいて画像に回転背景効果を追加する
CSS3_html/css_WEB-ITnose に基づいて画像に回転背景効果を追加する
- WBOYオリジナル
- 2016-06-24 11:29:431230ブラウズ
CSS3 を共有して、画像に回転する背景効果を追加します。これは、マウスが画像上をスライドするときのテキスト回転アニメーション効果の純粋な CSS3 実装です。レンダリングは次のとおりです:
オンライン プレビュー ソース コードのダウンロード
実装コード。
html コード:
<div class="main"> <div class="view"> <img src="images/modeo02.jpg" alt=""> <div class="hover"> <h3>魔力唇彩</h3> <p>嘴唇的诱惑嘴唇的诱唇的诱惑嘴唇的诱惑</p> </div> </div> <div class="view"> <img src="images/modeo03.jpg" alt=""> <div class="hover"> <h3>魔力唇彩</h3> <p>嘴唇的诱惑嘴唇的诱唇的诱惑嘴唇的诱惑</p> </div> </div> <div class="view"> <img src="images/modeo04.jpg" alt=""> <div class="hover"> <h3>魔力唇彩</h3> <p>嘴唇的诱惑嘴唇的诱唇的诱惑嘴唇的诱惑</p> </div> </div> <div class="view"> <img src="images/modeo05.jpg" alt=""> <div class="hover"> <h3>魔力唇彩</h3> <p>嘴唇的诱惑嘴唇的诱唇的诱惑嘴唇的诱惑</p> </div> </div> <div class="view"> <img src="images/modeo06.jpg" alt=""> <div class="hover"> <h3>魔力唇彩</h3> <p>嘴唇的诱惑嘴唇的诱唇的诱惑嘴唇的诱惑</p> </div> </div> <div class="view"> <img src="images/modeo07.jpg" alt=""> <div class="hover"> <h3>魔力唇彩</h3> <p>嘴唇的诱惑嘴唇的诱唇的诱惑嘴唇的诱惑</p> </div> </div> </div>
via: http://www.w2bc.com/article/85698
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。