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