首页 > web前端 > html教程 > 基于CSS3鼠标经过立体翻转切换特效_html/css_WEB-ITnose

基于CSS3鼠标经过立体翻转切换特效_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:29:31
原创
1081 人浏览过

基于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"    style="max-width:90%"  style="max-width:90%" alt="基于CSS3鼠标经过立体翻转切换特效_html/css_WEB-ITnose" ></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"    style="max-width:90%"  style="max-width:90%" alt="基于CSS3鼠标经过立体翻转切换特效_html/css_WEB-ITnose" ></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"    style="max-width:90%"  style="max-width:90%" alt="基于CSS3鼠标经过立体翻转切换特效_html/css_WEB-ITnose" ></div>                                <div class="flip-foot">适合人群:有闲置资金的</div>                            </div>                        </li>                    </ul>                </div>            </div>        </div>        <!--End 定期宝-->    </div>
登录后复制

via:http://www.w2bc.com/article/85794

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板