當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html border阴影效果_一篇文章教会你使用html+css3制作炫酷效果

發布時間：2025/3/13 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 html border阴影效果_一篇文章教会你使用html+css3制作炫酷效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

【一、項目背景】

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

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

【二、項目準備】

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

2、軟件：Dreamweaver

【三、項目目標】

運行時：圖片顯示縮略圖。文字顯示在上面。

點擊時：把對應的圖片顯示并放大，點擊文字有詳細的介紹。

【四、項目實現】

1、創建div 存放圖片和文件，添加class屬性。

2、添加文字。

<span class='ba'>功夫熊貓</span> <span class='ba'>飛屋環游記</span> <span class='ba'>汽車總動員</span> <span class='ba'>玩具總動員</span> <span class='ba'>機器人</span>

3、添加CSS樣式

1）設置body的背景顏色為灰色。

body{background: #ccc;}

2）設置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屬性，防止內容溢出。

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

4、文字樣式。

設置高，寬，行高設置跟高一樣，文字才能居中顯示。設置文字背景顏色，大小。

.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、添加鼠標移上去的效果樣式。

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

6、添加詳細介紹文字。（text文件自取）。

【五、效果展示】

1、點擊F12運行到瀏覽器。

2、點擊圖片放大。

3、點擊文字，詳細介紹。

【六、總結】

1、本項目，就鼠標點擊事件遇到的一些難點進行了分析及提供解決方案。

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

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

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

看完本文有收獲？請轉發分享給更多的人

IT共享之家

入群請在微信后臺回復【入群】

想學習更多Python網絡爬蟲與數據挖掘知識，可前往專業網站：http://pdcfighting.com/ 與50位技術專家面對面20年技術見證，附贈技術全景圖

以上是生活随笔為你收集整理的html border阴影效果_一篇文章教会你使用html+css3制作炫酷效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。