ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3 に基づいた 3 次元のフリップ切り替え効果 Mouse_html/css_WEB-ITnose
CSS3 に基づいた 3 次元のフリップ切り替え効果 Mouse_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:29:311074ブラウズ
CSS3 マウスと 3 次元フリップ切り替え効果に基づいています。マウスが表紙やディテールを通過する際にjQuery+CSS3をベースにした3Dフリップスイッチング効果です。レンダリングは次のとおりです:
オンライン プレビュー ソース コードのダウンロード
実装コード。
html コード:
<div class="wrapbox YaHei"> <div class="cont-box"> <div class="regularly-box"> <div class="regularly-head"> <strong>定期宝</strong><label>年利率：7%-18%</label> </div> <div class="regularly-contBody"> <ul class="regularly-item-list"> <li class="first viewport-flip"> <div class="flip-box flip out"> <dl class="flip-lists"> <dd> <i class="hot"></i> <h3>这里是项目名称</h3> <div class="flip-itmes-info"> <strong>10%</strong> <span class="to-day"><em>90</em>天</span> <div class="to-price">总金额：<label>888.00</label></div> </div> <div class="flip-itmes-ctrl"> <div class="progress-info"> <label class="fl">已完成</label> <div class="fl itmes-progress progress-tool" data="58"><span></span></div> <label"fl">58%</label> </div> <div class="itmes-btn-ctrl"> <a href="#" class="hoverLink ctrl-btn">立即加入</a> </div> </div> </dd> <dd> <h3>这里是项目名称</h3> <div class="flip-itmes-info"> <strong>10%</strong> <span class="to-day"><em>90</em>天</span> <div class="to-price">总金额：<label>888.00</label></div> </div> <div class="flip-itmes-ctrl"> <div class="progress-info"> <label class="fl">已完成</label> <div class="fl itmes-progress progress-tool" data="100"><span></span></div> <label"fl">100%</label> </div> <div class="itmes-btn-ctrl"> <span class="hoverLink ctrl-btn">抢光了</span> </div> </div> </dd> <dd> <h3>这里是项目名称</h3> <div class="flip-itmes-info"> <strong>10%</strong> <span class="to-day"><em>90</em>天</span> <div class="to-price">总金额：<label>888.00</label></div> </div> <div class="flip-itmes-ctrl"> <div class="progress-info"> <label class="fl">已完成</label> <div class="fl itmes-progress progress-tool" data="100"><span></span></div> <label"fl">100%</label> </div> <div class="itmes-btn-ctrl"> <span class="hoverLink ctrl-btn">已完成</span> </div> </div> </dd> </dl> </div> <div class="flip-box flip"> <div class="item-title">短期宝</div> <div class="item-tx">项目期限：90-270天</div> <div class="item-tx">年化利率：<label>9-12%</label></div> <div class="flip-item-pic"><img src="images/df-item-pic-1.jpg" width="150" height="150"></div> <div class="flip-foot">适合人群：有闲置资金的</div> </div> </li> <li class="viewport-flip"> <div class="flip-box flip out"> <dl class="flip-lists"> <dd> <i class="hot"></i> <h3>这里是项目名称</h3> <div class="flip-itmes-info"> <strong>10%</strong> <span class="to-day"><em>90</em>天</span> <div class="to-price">总金额：<label>888.00</label></div> </div> <div class="flip-itmes-ctrl"> <div class="progress-info"> <label class="fl">已完成</label> <div class="fl itmes-progress progress-tool" data="58"><span></span></div> <label"fl">58%</label> </div> <div class="itmes-btn-ctrl"> <a href="#" class="hoverLink ctrl-btn">立即加入</a> </div> </div> </dd> <dd> <h3>这里是项目名称</h3> <div class="flip-itmes-info"> <strong>10%</strong> <span class="to-day"><em>90</em>天</span> <div class="to-price">总金额：<label>888.00</label></div> </div> <div class="flip-itmes-ctrl"> <div class="progress-info"> <label class="fl">已完成</label> <div class="fl itmes-progress progress-tool" data="100"><span></span></div> <label"fl">100%</label> </div> <div class="itmes-btn-ctrl"> <span class="hoverLink ctrl-btn">抢光了</span> </div> </div> </dd> <dd> <h3>这里是项目名称</h3> <div class="flip-itmes-info"> <strong>10%</strong> <span class="to-day"><em>90</em>天</span> <div class="to-price">总金额：<label>888.00</label></div> </div> <div class="flip-itmes-ctrl"> <div class="progress-info"> <label class="fl">已完成</label> <div class="fl itmes-progress progress-tool" data="100"><span></span></div> <label"fl">100%</label> </div> <div class="itmes-btn-ctrl"> <span class="hoverLink ctrl-btn">已完成</span> </div> </div> </dd> </dl> </div> <div class="flip-box flip"> <div class="item-title">中期宝</div> <div class="item-tx">项目期限：90-270天</div> <div class="item-tx">年化利率：<label>9-12%</label></div> <div class="flip-item-pic"><img src="images/df-item-pic-2.jpg" width="150" height="150"></div> <div class="flip-foot">适合人群：有闲置资金的</div> </div> </li> <li class="last viewport-flip"> <div class="flip-box flip out"> <dl class="flip-lists"> <dd> <i class="hot"></i> <h3>这里是项目名称</h3> <div class="flip-itmes-info"> <strong>10%</strong> <span class="to-day"><em>90</em>天</span> <div class="to-price">总金额：<label>888.00</label></div> </div> <div class="flip-itmes-ctrl"> <div class="progress-info"> <label class="fl">已完成</label> <div class="fl itmes-progress progress-tool" data="58"><span></span></div> <label"fl">58%</label> </div> <div class="itmes-btn-ctrl"> <a href="#" class="hoverLink ctrl-btn">立即加入</a> </div> </div> </dd> <dd> <h3>这里是项目名称</h3> <div class="flip-itmes-info"> <strong>10%</strong> <span class="to-day"><em>90</em>天</span> <div class="to-price">总金额：<label>888.00</label></div> </div> <div class="flip-itmes-ctrl"> <div class="progress-info"> <label class="fl">已完成</label> <div class="fl itmes-progress progress-tool" data="100"><span></span></div> <label"fl">100%</label> </div> <div class="itmes-btn-ctrl"> <span class="hoverLink ctrl-btn">抢光了</span> </div> </div> </dd> <dd> <h3>这里是项目名称</h3> <div class="flip-itmes-info"> <strong>10%</strong> <span class="to-day"><em>90</em>天</span> <div class="to-price">总金额：<label>888.00</label></div> </div> <div class="flip-itmes-ctrl"> <div class="progress-info"> <label class="fl">已完成</label> <div class="fl itmes-progress progress-tool" data="100"><span></span></div> <label"fl">100%</label> </div> <div class="itmes-btn-ctrl"> <span class="hoverLink ctrl-btn">已完成</span> </div> </div> </dd> </dl> </div> <div class="flip-box flip"> <div class="item-title">长期宝</div> <div class="item-tx">项目期限：90-270天</div> <div class="item-tx">年化利率：<label>9-12%</label></div> <div class="flip-item-pic"><img src="images/df-item-pic-3.jpg" width="150" height="150"></div> <div class="flip-foot">适合人群：有闲置资金的</div> </div> </li> </ul> </div> </div> </div> <!--End 定期宝--> </div>
via: http://www.w2bc.com/article/85794
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。