基于CSS3鼠标经过立体翻转切换特效
阅读：178
时间：2018-02-04 01:40
基于CSS3鼠标经过立体翻转切换特效。这是一款基于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
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-3
闽ICP备12017094号-3