你的位置:首页 > 网页设计

[网页设计]基于CSS3鼠标经过立体翻转切换特效


基于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