整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          一篇文章教會你使用html+css3制作炫酷效果

          一、項目背景】

          在瀏覽一些網(wǎng)站的時候,經(jīng)常會看到很多的炫酷的效果去裝飾頁面,使它看起來更高端大氣一些。比如,藝龍就采用了圖片上加載文字,點擊圖片使把對應(yīng)的圖片放大,使用戶清晰,直觀的看到內(nèi)容。這種效果該怎么做呢?

          今天教大家用簡單的html+css3結(jié)合制作藝龍的頁面效果。

          【二、項目準(zhǔn)備】

          1、圖片:新建img文件,準(zhǔn)備自己喜歡的五張圖,保存在文件夾。

          2、軟件:Dreamweaver

          【三、項目目標(biāo)】

          運(yùn)行時:圖片顯示縮略圖。文字顯示在上面。

          點擊時:把對應(yīng)的圖片顯示并放大,點擊文字有詳細(xì)的介紹。

          【四、項目實現(xiàn)】

          1、創(chuàng)建div 存放圖片和文件,添加class屬性。

          <body>
          <div  class="show">
          <div class="wap">
            <div class="box" >
              <img src="images/img1.jpg">
              <span class='ba'>
            </div>
            <div class="box">
              <img src="images/img2.jpg">
              <span class='ba'></span>
              
            </div>
            <div class="box">
              <img src="images/img3.jpg">
              <span class='ba'></span>
            </div>
            <div class="box">
              <img src="images/img4.jpg">
              <span class='ba'></span>
            </div>
            <div class="box">
              <img src="images/img5.jpg">
              <span class='ba'></span>
            </div>
            </div>
          </div>
          </body>

          2、添加文字。

          <span class='ba'>功夫熊貓</span>
          <span class='ba'>飛屋環(huán)游記</span>
          <span class='ba'>汽車總動員</span>
          <span class='ba'>玩具總動員</span>
          <span class='ba'>機(jī)器人</span>

          3、添加CSS樣式

          1)設(shè)置body的背景顏色為灰色。

          body
            {
              background: #ccc;
            }

          2)設(shè)置box的寬,邊框,邊框陰影,加載動畫過渡效果。

          .box{
              float: left;
              width: 160px;
              transition: all 0.5s;
              border: 1px solid #fff; #邊框
              box-shadow: -5px 0px 10px 0px #000; #陰影
              position: relative;
            }

          3)添加外層div 樣式。添加overflow屬性,防止內(nèi)容溢出。

          .wap{
              width: 999999999px;
              overflow: hidden;
            }
            .show{
              width: 800px;
              height: 320px;
              overflow: hidden;
              margin: 200px auto;
              box-shadow: 5px 5px 10px 4px #000;
            }

          4、文字樣式。

          設(shè)置高,寬,行高設(shè)置跟高一樣, 文字才能居中顯示。設(shè)置文字背景顏色,大小。

          .ba{
                 width: 640px;
                 height: 50px;
                 line-height: 50px;
              color: #fff;
              background: rgba(0,0,0,0.5);
                  bottom: 0;
                  left: 0;
              position: absolute;
              text-indent: 2em;    
            }

          5、添加鼠標(biāo)移上去的效果樣式。

           .ba:hover{    
                 height: 320px;
                 transition: all 0.5s;
            }
            .show:hover .box{
              width: 40px;
          
            }
              
            .show .box:hover{
              width: 640px;
          
            }

          6、添加詳細(xì)介紹文字。(text文件自?。?。

          【五、效果展示】

          1、點擊F12運(yùn)行到瀏覽器。

          2、點擊圖片放大。

          3、點擊文字,詳細(xì)介紹。

          【六、總結(jié)】

          1、本項目,就鼠標(biāo)點擊事件遇到的一些難點進(jìn)行了分析及提供解決方案。

          2、html+css也可以做出網(wǎng)站頁面的效果,在上面顯示圖片標(biāo)題的地方不能用絕對定位,于是用的relative定位,這個地方是布局的核心部分,否則無法將文字放在圖片之上。

          3、按照操作步驟,自己嘗試去做。自己實現(xiàn)的時候,總會有各種各樣的問題,切勿眼高手低,勤動手,才可以理解的更加深刻。

          4、需要本文源碼的小伙伴,后臺回復(fù)“炫酷效果”四個字,即可獲取。

          ****看完本文有收獲?請轉(zhuǎn)發(fā)分享給更多的人****

          IT共享之家

          入群請在微信后臺回復(fù)【入群】



          想學(xué)習(xí)更多Python網(wǎng)絡(luò)爬蟲與數(shù)據(jù)挖掘知識,可前往專業(yè)網(wǎng)站:http://pdcfighting.com/

          似一些大型電商網(wǎng)站,一般很多產(chǎn)品展示圖都加上了很多炫酷的效果來增強(qiáng)用戶體驗。當(dāng)鼠標(biāo)移上去就會出現(xiàn)特效是常見的一種動作,下面主要說說鼠標(biāo)經(jīng)過圖片時候出現(xiàn)高光的特效。效果如下:

          紅色指向是出現(xiàn)高光的部分

          重要的CSS3樣式:

          主要用來背景的漸變來實現(xiàn)那條高光,然后再運(yùn)用動畫來實現(xiàn)運(yùn)動的距離位置!

          在前端網(wǎng)頁中用CSS3實現(xiàn)各種各樣展示特效非常多。今天就來說下如何實現(xiàn)聊天對話界面的聊天對話框效果;

          效果圖:

          html:

          CSS:

          通過應(yīng)用css3的偽類元素:before和:after定位兩個不同顏色的三角形,然后利用疊蓋方法用白色背景的三角形定位在有背景三角形下面,這樣一個有邊框的三角形就可以實現(xiàn)了!


          主站蜘蛛池模板: 亚洲av无码一区二区三区天堂古代| 在线观看日韩一区| 国产在线精品一区二区不卡麻豆| 一区二区视频在线观看| 国产一区二区福利久久| 亚洲乱码国产一区三区| 日韩A无码AV一区二区三区| 中文字幕AV一区二区三区| 久久se精品一区二区国产 | 日本精品一区二区三区视频| 亚洲国产精品一区二区成人片国内 | 国产免费伦精品一区二区三区| 国内精品一区二区三区在线观看| 91无码人妻精品一区二区三区L| 久久久久99人妻一区二区三区| 中文字幕在线观看一区二区| 一区二区三区在线播放| 日韩一区二区三区视频| 国产SUV精品一区二区88L| 无码一区二区三区免费视频| 亚洲一区二区三区无码国产 | 人妻夜夜爽天天爽爽一区| 91久久精一区二区三区大全| 日本一区视频在线播放| 欲色影视天天一区二区三区色香欲 | 亚洲AV乱码一区二区三区林ゆな| 国产一区二区在线观看麻豆| 精品久久久久久无码中文字幕一区| 亚洲综合av一区二区三区不卡| 亚洲AV无码一区二区三区久久精品| 2021国产精品视频一区| 精品国产亚洲一区二区三区在线观看 | 亚洲日韩精品一区二区三区| 国产亚洲欧洲Aⅴ综合一区| 国产精品一区12p| 国产在线精品一区二区中文 | 国产一区二区在线观看视频| 亚洲国产精品一区二区第四页| 亚洲av高清在线观看一区二区 | 精品一区二区三人妻视频| 日韩福利视频一区|