ホームページ > 記事 > ウェブフロントエンド > CSS3_html/css_WEB-ITnose に基づいて画像に回転背景効果を追加する
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