一篇文章教會你使用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)了！

在線咨詢

上一篇：分布式隊列編程模型、實戰(zhàn)
下一篇：HTML5游戲怎么做？

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

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

您的項目需求