css3 transition制作鼠標懸停logo圖文切換代碼



72 286 96



特效描述:css3 transition制作 鼠標懸停 logo圖文切換,鼠標懸停logo圖文切換代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. HTML代碼

        <div class="comm-box">
            <div class="comm-header">
                <h3>值得信賴的公司</h3>
            </div>
            <div class="comm-content">
                <ul class="comm-content-list clearfix">
                    <li>
                        <div class="comm-list-item">
                            <img src="images/logo1.jpg" alt="">
                            <p>美圖公司</p>
                            <div class="comm-list-cont">
                                <div class="comm-list-text">
                                    <p>美圖,讓更多人變美!2016年12月15日,美圖公司在香港聯合交易所(“聯交所”)主板掛牌上市,股票代碼1357。</p>
                                    <div>
                                        <a href="#" class="comm-go-home">訪問公司主頁</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="comm-list-item">
                            <img src="images/logo2.jpg" alt="">
                            <p>京東集團</p>
                            <div class="comm-list-cont">
                                <div class="comm-list-text">
                                    <p>京東(股票代碼:JD),中國自營式電商企業,創始人劉強東擔任京東集團董事局主席兼首席執行官。旗下設有京東商城</p>
                                    <div>
                                        <a href="#" class="comm-go-home">訪問公司主頁</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="comm-list-item">
                            <img src="images/logo3.jpg" alt="">
                            <p>蘇寧易購</p>
                            <div class="comm-list-cont">
                                <div class="comm-list-text">
                                    <p>蘇寧易購,是蘇寧易購集團股份有限公司旗下新一代B2C網上購物平臺,現已覆蓋傳統家電,3C電器、日用百貨等品類</p>
                                    <div>
                                        <a href="#" class="comm-go-home">訪問公司主頁</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="comm-list-item">
                            <img src="images/logo4.jpg" alt="">
                            <p>小米科技</p>
                            <div class="comm-list-cont">
                                <div class="comm-list-text">
                                    <p>北京小米科技有限責任公司成立2010年3月3日,是一家專注于智能硬件和電子產品研發的移動互聯網公司。“為發燒而生”</p>
                                    <div>
                                        <a href="#" class="comm-go-home">訪問公司主頁</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="comm-list-item">
                            <img src="images/logo5.jpg" alt="">
                            <p>錘子科技</p>
                            <div class="comm-list-cont">
                                <div class="comm-list-text">
                                    <p>錘子科技是一家制造移動互聯網終端設備的公司,公司的使命是用完美主義的工匠精神,打造用戶體驗一流的數碼消費類產品</p>
                                    <div>
                                        <a href="#" class="comm-go-home">訪問公司主頁</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 其他 圖片切換 圖片選項卡 圖標選項卡 文字切換 文字選項卡 鼠標滑過 鼠標懸停 跟隨鼠標移動
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子