【原】一篇文章教會(huì)你使用html+css3制作炫酷效果

Python進(jìn)階者 2023-02-10 發(fā)布于廣東

展開(kāi)全文

【一,、項(xiàng)目背景】

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

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

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

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

2,、軟件：Dreamweaver

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

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

點(diǎn)擊時(shí)：把對(duì)應(yīng)的圖片顯示并放大，點(diǎn)擊文字有詳細(xì)的介紹,。

【四,、項(xiàng)目實(shí)現(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'>汽車(chē)總動(dòng)員</span><span class='ba'>玩具總動(dòng)員</span><span class='ba'>機(jī)器人</span>

3,、添加CSS樣式

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

body  {    background: #ccc;  }

2）設(shè)置box的寬,，邊框,，邊框陰影，加載動(dòng)畫(huà)過(guò)渡效果,。

.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;
  }