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