CSS3實(shí)戰(zhàn)開發(fā)：百度新聞熱搜詞特效實(shí)戰(zhàn)開發(fā)_html/css_WEB-ITnose
Jun 24, 2016 am 11:59 AM
各位網(wǎng)友，今天這篇文章，我將手把手帶領(lǐng)大家開發(fā)百度新聞首頁的"新聞熱搜詞"特效。在這個(gè)特效中應(yīng)用的知識(shí)點(diǎn)都很基礎(chǔ)，如果你對(duì)這些還不清楚，可以關(guān)注我以前寫的詳細(xì)教程。今天講這個(gè)案例，也是希望告訴大家，在開發(fā)一個(gè)特效的時(shí)候，請(qǐng)不要將問題復(fù)雜化?？赡苡行┤艘婚_始真的不知道從哪下手，當(dāng)你看完本次教程，你定會(huì)覺得，原來一切都這么簡(jiǎn)單。
可能有些人還不知道這個(gè)特效，啥也不說了，直接上效果圖：
從上面的特效中，大家不難發(fā)現(xiàn)，當(dāng)鼠標(biāo)劃過熱搜詞時(shí)，會(huì)有一個(gè)半透明的黑色背景滑上來，而且這個(gè)黑色區(qū)域中也是有熱搜詞的。
大概知道這些細(xì)節(jié)后，現(xiàn)在我就分步驟帶領(lǐng)大家開發(fā)這個(gè)特效。
根據(jù)上面所說的關(guān)鍵細(xì)節(jié)，編寫html代碼如下:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css"> <title>CSS3實(shí)戰(zhàn)開發(fā):百度熱搜詞動(dòng)畫特效實(shí)戰(zhàn)開發(fā)</title> </head> <body> <div class="container"> <div id="news_hotwords"> <div class="keywords_title"> <a href="http://www.itdriver.cn">新聞熱搜詞</a><span>HOT WORDS</span> </div> <div class="hotwords"> <ul> <li class="li_0 li_color_0"> <a class="hotwords_li_a" href="http://www.itdriver.cn" title="css3教程,html5教程,互聯(lián)網(wǎng)實(shí)戰(zhàn)教程">一起為改革發(fā)力</a> <a class="detail" href="http://www.itdriver.cn" title="css3教程,html5教程,互聯(lián)網(wǎng)實(shí)戰(zhàn)教程">一起為改革發(fā)力</a> </li> <li class="li_1 li_color_1"> <a class="hotwords_li_a" href="http://www.itdriver.cn">習(xí) 近 平會(huì)見外國(guó)友人</a> <a class="detail" href="http://www.itdriver.cn">習(xí) 近 平會(huì)見外國(guó)友人</a> </li> <li class="li_2 li_color_0"> <a class="hotwords_li_a" href="http://www.itdriver.cn">李 克 強(qiáng)重視知識(shí)產(chǎn)權(quán)</a> <a class="detail" href="http://www.itdriver.cn">李 克 強(qiáng)重視知識(shí)產(chǎn)權(quán)</a> </li> <li class="li_3 li_color_1"> <a class="hotwords_li_a" href="http://www.itdriver.cn">36斤純黃金鴛鴦?wù)?lt;/a> <a class="detail" href="http://www.itdriver.cn">36斤純黃金鴛鴦?wù)?lt;/a> </li> <li class="li_4 li_color_0"> <a class="hotwords_li_a" href="http://www.itdriver.cn">EXO機(jī)場(chǎng)辱工作人員</a> <a class="detail" href="http://www.itdriver.cn">EXO機(jī)場(chǎng)辱工作人員</a> </li> <li class="li_5 li_color_1"> <a class="hotwords_li_a" href="http://www.itdriver.cn">學(xué)費(fèi)迎來"漲價(jià)潮"</a> <a class="detail" href="http://www.itdriver.cn">學(xué)費(fèi)迎來"漲價(jià)潮"</a> </li> <li class="li_6 li_color_0"> <a class="hotwords_li_a" href="http://www.itdriver.cn">女舉小將蔣惠花奪魁</a> <a class="detail" href="http://www.itdriver.cn">女舉小將蔣惠花奪魁</a> </li> <li class="li_7 li_color_1"> <a class="hotwords_li_a" href="http://www.itdriver.cn">童名謙獲刑五年</a> <a class="detail" href="http://www.itdriver.cn">童名謙獲刑五年</a> </li> <li class="li_8 li_color_0"> <a class="hotwords_li_a" href="http://www.itdriver.cn">青奧會(huì)</a> <a class="detail" href="http://www.itdriver.cn">青奧會(huì)</a> </li> <li class="li_9 li_color_1"> <a class="hotwords_li_a" href="http://www.itdriver.cn">白卷英雄成4億富豪</a> <a class="detail" href="http://www.itdriver.cn">白卷英雄成4億富豪</a> </li> <li class="li_10 li_color_0"> <a class="hotwords_li_a" href="http://www.itdriver.cn">被俘虜女子拒做性奴</a> <a class="detail" href="http://www.itdriver.cn">被俘虜女子拒做性奴</a> </li> <li class="li_11 li_color_1"> <a class="hotwords_li_a" href="http://www.itdriver.cn">女子把狗毛當(dāng)零食</a> <a class="detail" href="http://www.itdriver.cn">女子把狗毛當(dāng)零食</a> </li> </ul> </div> </div> </div> </body></html>
大家從html源碼中會(huì)發(fā)現(xiàn)，每個(gè)熱搜詞都出現(xiàn)兩次，這是因?yàn)橐粋€(gè)用作正常顯示的，另一是用作當(dāng)鼠標(biāo)劃過時(shí)，滑動(dòng)上來的黑色區(qū)域。這里我暫且分別將它們樣式定義為.hotwords_li_a和detail，同時(shí)我們的關(guān)鍵詞用無序列表(ul)來顯示。
頁面代碼編寫完后，我們先運(yùn)行一下，查看一下現(xiàn)在的效果：
頁面元素都準(zhǔn)備好之后，接著我們給頁面添加樣式，首先要做的是先清除掉無序列表(ul)的默認(rèn)樣式，同時(shí)設(shè)置外容器布局以方便演示。樣式代碼如下：
*{ /*設(shè)置所有元素默認(rèn)內(nèi)外邊距，同時(shí)設(shè)置默認(rèn)字體大小*/ margin:0; padding:0; font-size:14px;}.container{ /*設(shè)置外層容器布局，這里主要是為了方便演示*/ margin:200px 200px auto;}/*清除ul默認(rèn)顯示樣式*/ul { list-style-type:none; }a { /*去除超鏈接下劃線*/ text-decoration:none; } 運(yùn)行頁面，查看此時(shí)的頁面效果：
外容器的基本布局以及所有元素的默認(rèn)樣式設(shè)置完成之后，現(xiàn)在我們就可以來實(shí)現(xiàn)新聞熱搜詞的區(qū)域樣式了：
.hotwords li{ float:left; /*使熱搜詞都向左浮動(dòng)*/ position:relative; /*由于li里面有元素要執(zhí)行動(dòng)畫效果，所以將li的position設(shè)置為相對(duì)定位*/ width:68px; /*設(shè)置熱搜詞的基本寬高度*/ height:68px; margin:0 2px 2px 0; overflow:hidden; /*設(shè)置當(dāng)熱搜詞顯示的內(nèi)容超過區(qū)域大小時(shí)，隱藏超出的部分*/ text-align:center; /*內(nèi)部文字居中顯示*/}.hotwords li.li_0,.hotwords li.li_3,.hotwords li.li_8,.hotwords li.li_11 { /*大家訪問百度新聞首頁，定會(huì)發(fā)現(xiàn)，它的1,4,9和12這幾個(gè)快的寬度是其他的兩倍，所以這里單獨(dú)設(shè)置*/ width:138px;}.hotwords li a{ /*將所有a元素都設(shè)置為塊元素block，這樣就可以調(diào)整它的高度*/ display:block; text-decoration:none; padding:2px; height:64px; color:white;}.hotwords li.li_0 a,.hotwords li.li_3 a,.hotwords li.li_8 a,.hotwords li.li_11 a { /*對(duì)于1,4,9和12這幾個(gè)元素它的文字是垂直方向上居中顯示的*/ width:135px; line-height:64px;}.hotwords li.li_color_0{ background:#0DA4D6;}.hotwords li.li_color_1{ background:#35C4EF;}
上面這段樣式代碼主要是設(shè)置熱搜詞區(qū)域li的樣式，如果對(duì)代碼不是太了解，可以參考我的樣式注釋。
此時(shí)效果如下：
大家可以發(fā)現(xiàn)，我在最開始時(shí)演示的樣式，新聞熱搜詞這個(gè)title信息為淡藍(lán)色的，同時(shí)熱搜詞區(qū)域是顯示兩行的，現(xiàn)在我們來添加以下設(shè)置顯示熱搜詞區(qū)域的樣式：
.hotwords{ /*設(shè)置新聞熱搜詞區(qū)域的大小*/ width:568px;}.keywords_title{ /*設(shè)置熱搜詞區(qū)域字體樣式以及它距離底部外邊距的距離*/ font-size:1.5em; margin-bottom:10px;}.keywords_title,.keywords_title a{ /*設(shè)置熱搜詞title以及熱搜詞link的默認(rèn)顏色*/ color:#3399CC;} 此時(shí)的頁面樣式如下:
當(dāng)我們鼠標(biāo)劃過這些熱搜詞時(shí)，沒有任何變化。好，接著我們給頁面中的類型為detail的元素應(yīng)用樣式：
.hotwords .detail{ position:absolute;/*設(shè)置detail為絕對(duì)定位，由于li設(shè)置了relative，所以detail是相對(duì)于li元素的絕對(duì)定位*/ background:rgba(0,0,0,0.8); /*設(shè)置detail區(qū)域的背景色*/ left:0; /*設(shè)置detail相對(duì)li的偏移距離*/ top:68px; -webkit-transition:top 0.2s; /*當(dāng)detail類型的元素top屬性發(fā)生變化時(shí)，執(zhí)行過度動(dòng)畫，過度時(shí)間為0.2s*/ -moz-transition:top 0.2s; -o-transition:top 0.2s; transition:top 0.2s;}.hotwords li:hover .detail{ /*當(dāng)鼠標(biāo)劃過li時(shí)，設(shè)置detail類型元素的樣式*/ top:0px;} 在上面這段代碼中，我們主要使用了兩個(gè)關(guān)鍵屬性，position:absolute和transition，如果大家對(duì)這兩個(gè)不是太了解的，可以參考我以前寫的教程《CSS3實(shí)戰(zhàn)開發(fā):手把手教你照片墻實(shí)戰(zhàn)開發(fā)》和《CSS3基本屬性之Transition詳解》。經(jīng)過這兩個(gè)教程的學(xué)習(xí)，相信你對(duì)這些知識(shí)點(diǎn)都會(huì)了如指掌了。
現(xiàn)在我們運(yùn)行一下頁面：
至此，《百度新聞熱搜詞特效》就開發(fā)完了，大家說是不是很簡(jiǎn)單呢。
往期精彩實(shí)戰(zhàn)開發(fā)案例一覽(已被廣為轉(zhuǎn)載，下面只列出部分)：
1. 《CSS3實(shí)戰(zhàn)開發(fā):手把手教你鼠標(biāo)滑動(dòng)特效開發(fā)》
2. 《CSS3實(shí)戰(zhàn)開發(fā)：手把手教大家搜索表單發(fā)光特效實(shí)戰(zhàn)開發(fā)》
3.?《CSS3實(shí)戰(zhàn)開發(fā): 彈性盒模型之響應(yīng)式WEB界面設(shè)計(jì)》
4.?《CSS3線性漸變技術(shù)詳解及超炫按鈕實(shí)戰(zhàn)開發(fā)》
5.?《CSS3 2D轉(zhuǎn)換之translate技術(shù)詳解 及 網(wǎng)頁導(dǎo)航實(shí)戰(zhàn)開發(fā)》
6.?《CSS3實(shí)戰(zhàn)開發(fā):手把手教你照片墻實(shí)戰(zhàn)開發(fā)》
7.?《CSS3實(shí)戰(zhàn)開發(fā): 手把手教大家實(shí)戰(zhàn)開發(fā)鼠標(biāo)劃過圖片動(dòng)畫特效》
8.?《CSS3實(shí)戰(zhàn)開發(fā):仿天貓首頁圖片展示動(dòng)畫特效實(shí)戰(zhàn)開發(fā)》
9.?《CSS3實(shí)戰(zhàn)開發(fā):手把手教大家折角效果實(shí)戰(zhàn)開發(fā)》
歡迎大家加入互聯(lián)網(wǎng)技術(shù)交流群：62329335?
個(gè)人申明：所分享博文，絕對(duì)原創(chuàng)，并力爭(zhēng)每一個(gè)知識(shí)點(diǎn)都通過實(shí)戰(zhàn)演示來進(jìn)行驗(yàn)證。
熱AI工具
Undress AI Tool
免費(fèi)脫衣圖片
Undresser.AI Undress
人工智慧驅(qū)動(dòng)的應(yīng)用程序，用於創(chuàng)建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費(fèi)的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強(qiáng)大的PHP整合開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級(jí)程式碼編輯軟體(SublimeText3)
熱門話題
四款值得推薦的AI輔助程式工具
Apr 22, 2024 pm 05:34 PM
這個(gè)AI輔助程式工具在這個(gè)AI快速發(fā)展的階段，挖掘出了一大批好用的AI輔助程式工具。 AI輔助程式設(shè)計(jì)工具能夠提升開發(fā)效率、提升程式碼品質(zhì)、降低bug率，是現(xiàn)代軟體開發(fā)過程中的重要助手。今天大姚給大家分享4款A(yù)I輔助程式工具（而且都支援C#語言），希望對(duì)大家有幫助。 https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot是一款A(yù)I編碼助手，可幫助你更快、更省力地編寫程式碼，從而將更多精力集中在問題解決和協(xié)作上。 Git
AI程式設(shè)計(jì)師哪家強(qiáng)？探索Devin、通靈靈碼和SWE-agent的潛力
Apr 07, 2024 am 09:10 AM
2022年3月3日，距離世界首個(gè)AI程式設(shè)計(jì)師Devin誕生不足一個(gè)月，普林斯頓大學(xué)的NLP團(tuán)隊(duì)開發(fā)了一個(gè)開源AI程式設(shè)計(jì)師SWE-agent。它利用GPT-4模型在GitHub儲(chǔ)存庫中自動(dòng)解決問題。 SWE-agent在SWE-bench測(cè)試集上的表現(xiàn)與Devin相似，平均耗時(shí)93秒，解決了12.29%的問題。 SWE-agent透過與專用終端交互，可以開啟、搜尋文件內(nèi)容，使用自動(dòng)語法檢查、編輯特定行，以及編寫和執(zhí)行測(cè)試。 （註：以上內(nèi)容為原始內(nèi)容微調(diào)，但保留了原文中的關(guān)鍵訊息，未超過指定字?jǐn)?shù)限制。）SWE-A
學(xué)習(xí)如何利用Go語言開發(fā)行動(dòng)應(yīng)用程式
Mar 28, 2024 pm 10:00 PM
Go語言開發(fā)行動(dòng)應(yīng)用程式教學(xué)隨著行動(dòng)應(yīng)用程式市場(chǎng)的不斷蓬勃發(fā)展，越來越多的開發(fā)者開始探索如何利用Go語言開發(fā)行動(dòng)應(yīng)用程式。作為一種簡(jiǎn)潔高效的程式語言，Go語言在行動(dòng)應(yīng)用開發(fā)中也展現(xiàn)了強(qiáng)大的潛力。本文將詳細(xì)介紹如何利用Go語言開發(fā)行動(dòng)應(yīng)用程序，並附上具體的程式碼範(fàn)例，幫助讀者快速入門並開始開發(fā)自己的行動(dòng)應(yīng)用程式。一、準(zhǔn)備工作在開始之前，我們需要準(zhǔn)備好開發(fā)環(huán)境和工具。首
Go語言前端技術(shù)探秘：前端開發(fā)新視野
Mar 28, 2024 pm 01:06 PM
Go語言作為一種快速、高效的程式語言，在後端開發(fā)領(lǐng)域廣受歡迎。然而，很少有人將Go語言與前端開發(fā)聯(lián)繫起來。事實(shí)上，使用Go語言進(jìn)行前端開發(fā)不僅可以提高效率，還能為開發(fā)者帶來全新的視野。本文將探討使用Go語言進(jìn)行前端開發(fā)的可能性，並提供具體的程式碼範(fàn)例，幫助讀者更了解這一領(lǐng)域。在傳統(tǒng)的前端開發(fā)中，通常會(huì)使用JavaScript、HTML和CSS來建立使用者介面
PHP實(shí)戰(zhàn)：快速實(shí)作斐波那契數(shù)列的程式碼範(fàn)例
Mar 20, 2024 pm 02:24 PM
PHP實(shí)戰(zhàn)：快速實(shí)現(xiàn)斐波那契數(shù)列的程式碼範(fàn)例斐波那契數(shù)列是數(shù)學(xué)中一個(gè)非常有趣且常見的數(shù)列，其定義如下：第一個(gè)和第二個(gè)數(shù)為0和1，從第三個(gè)數(shù)開始，每個(gè)數(shù)都是前兩個(gè)數(shù)的和。斐波那契數(shù)列的前幾個(gè)數(shù)字依序?yàn)?,1,1.2,3,5,8,13,21,...依此類推。在PHP中，我們可以透過遞歸和迭代兩種方式來實(shí)現(xiàn)斐波那契數(shù)列的生成。下面我們分別來展示這兩
Android開發(fā)最適合的Linux發(fā)行版是哪一個(gè)？
Mar 14, 2024 pm 12:30 PM
Android開發(fā)是一項(xiàng)繁忙而又令人興奮的工作，而選擇適合的Linux發(fā)行版來進(jìn)行開發(fā)則顯得尤為重要。在眾多的Linux發(fā)行版中，究竟哪一個(gè)最適合Android開發(fā)呢？本文將從幾個(gè)方面來探討這個(gè)問題，並給出具體的程式碼範(fàn)例。首先，我們來看看目前流行的幾個(gè)Linux發(fā)行版：Ubuntu、Fedora、Debian、CentOS等，它們都有各自的優(yōu)點(diǎn)和特點(diǎn)。
VSCode最適合哪種框架開發(fā)？
Mar 25, 2024 pm 02:03 PM
VSCode是一款功能強(qiáng)大、靈活、易於擴(kuò)充的開源程式碼編輯器，廣受開發(fā)者青睞。它支援眾多程式語言和框架，能夠滿足不同專案需求。但是，針對(duì)不同的框架，VSCode的優(yōu)勢(shì)可能有所不同。本文將討論VSCode在不同框架開發(fā)中的適用性，並提供具體的程式碼範(fàn)例。 1.ReactReact是一款流行的JavaScript庫，用於建立使用者介面。在使用React開發(fā)專案時(shí)，
Golang動(dòng)態(tài)庫實(shí)戰(zhàn)：案例分享與實(shí)用技巧
Mar 01, 2024 am 08:30 AM
Golang動(dòng)態(tài)函式庫實(shí)戰(zhàn)：案例分享與實(shí)用技巧在Golang（Go語言）中，使用動(dòng)態(tài)函式庫可以實(shí)現(xiàn)模組化開發(fā)、程式碼重用以及動(dòng)態(tài)載入等功能。本文將透過案例分享和實(shí)用技巧，介紹如何在Golang中使用動(dòng)態(tài)程式庫，以及如何利用動(dòng)態(tài)程式庫提升程式碼的靈活性和可維護(hù)性。什麼是動(dòng)態(tài)庫動(dòng)態(tài)庫是一種包含可在運(yùn)行時(shí)載入的函數(shù)和資料的檔案。不像靜態(tài)函式庫需要在編譯時(shí)連結(jié)到應(yīng)用程式中，動(dòng)態(tài)函式庫可以在執(zhí)行
