CSS3实战开发：百度新闻热搜词特效实战开发_html/css_WEB-ITnose
各位网友，今天这篇文章，我将手把手带领大家开发百度新闻首页的"新闻热搜词"特效。在这个特效中应用的知识点都很基础，如果你对这些还不清楚，可以关注我以前写的详细教程。今天讲这个案例，也是希望告诉大家，在开发一个特效的时候，请不要将问题复杂化。可能有些人一开始真的不知道从哪下手，当你看完本次教程，你定会觉得，原来一切都这么简单。
可能有些人还不知道这个特效，啥也不说了，直接上效果图：
从上面的特效中，大家不难发现，当鼠标划过热搜词时，会有一个半透明的黑色背景滑上来，而且这个黑色区域中也是有热搜词的。
大概知道这些细节后，现在我就分步骤带领大家开发这个特效。
根据上面所说的关键细节，编写html代码如下:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css"> <title>CSS3实战开发:百度热搜词动画特效实战开发</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教程,互联网实战教程">一起为改革发力</a> <a class="detail" href="http://www.itdriver.cn" title="css3教程,html5教程,互联网实战教程">一起为改革发力</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">李 克 强重视知识产权</a> <a class="detail" href="http://www.itdriver.cn">李 克 强重视知识产权</a> </li> <li class="li_3 li_color_1"> <a class="hotwords_li_a" href="http://www.itdriver.cn">36斤纯黄金鸳鸯枕</a> <a class="detail" href="http://www.itdriver.cn">36斤纯黄金鸳鸯枕</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源码中会发现，每个热搜词都出现两次，这是因为一个用作正常显示的，另一是用作当鼠标划过时，滑动上来的黑色区域。这里我暂且分别将它们样式定义为.hotwords_li_a和detail，同时我们的关键词用无序列表(ul)来显示。
页面代码编写完后，我们先运行一下，查看一下现在的效果：
页面元素都准备好之后，接着我们给页面添加样式，首先要做的是先清除掉无序列表(ul)的默认样式，同时设置外容器布局以方便演示。样式代码如下：
*{ /*设置所有元素默认内外边距，同时设置默认字体大小*/ margin:0; padding:0; font-size:14px;}.container{ /*设置外层容器布局，这里主要是为了方便演示*/ margin:200px 200px auto;}/*清除ul默认显示样式*/ul { list-style-type:none; }a { /*去除超链接下划线*/ text-decoration:none; }运行页面，查看此时的页面效果：
外容器的基本布局以及所有元素的默认样式设置完成之后，现在我们就可以来实现新闻热搜词的区域样式了：
.hotwords li{ float:left; /*使热搜词都向左浮动*/ position:relative; /*由于li里面有元素要执行动画效果，所以将li的position设置为相对定位*/ width:68px; /*设置热搜词的基本宽高度*/ height:68px; margin:0 2px 2px 0; overflow:hidden; /*设置当热搜词显示的内容超过区域大小时，隐藏超出的部分*/ text-align:center; /*内部文字居中显示*/}.hotwords li.li_0,.hotwords li.li_3,.hotwords li.li_8,.hotwords li.li_11 { /*大家访问百度新闻首页，定会发现，它的1,4,9和12这几个快的宽度是其他的两倍，所以这里单独设置*/ width:138px;}.hotwords li a{ /*将所有a元素都设置为块元素block，这样就可以调整它的高度*/ 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;}
上面这段样式代码主要是设置热搜词区域li的样式，如果对代码不是太了解，可以参考我的样式注释。
此时效果如下：
大家可以发现，我在最开始时演示的样式，新闻热搜词这个title信息为淡蓝色的，同时热搜词区域是显示两行的，现在我们来添加以下设置显示热搜词区域的样式：
.hotwords{ /*设置新闻热搜词区域的大小*/ width:568px;}.keywords_title{ /*设置热搜词区域字体样式以及它距离底部外边距的距离*/ font-size:1.5em; margin-bottom:10px;}.keywords_title,.keywords_title a{ /*设置热搜词title以及热搜词link的默认颜色*/ color:#3399CC;}此时的页面样式如下:
当我们鼠标划过这些热搜词时，没有任何变化。好，接着我们给页面中的类型为detail的元素应用样式：
.hotwords .detail{ position:absolute;/*设置detail为绝对定位，由于li设置了relative，所以detail是相对于li元素的绝对定位*/ background:rgba(0,0,0,0.8); /*设置detail区域的背景色*/ left:0; /*设置detail相对li的偏移距离*/ top:68px; -webkit-transition:top 0.2s; /*当detail类型的元素top属性发生变化时，执行过度动画，过度时间为0.2s*/ -moz-transition:top 0.2s; -o-transition:top 0.2s; transition:top 0.2s;}.hotwords li:hover .detail{ /*当鼠标划过li时，设置detail类型元素的样式*/ top:0px;}在上面这段代码中，我们主要使用了两个关键属性，position:absolute和transition，如果大家对这两个不是太了解的，可以参考我以前写的教程《CSS3实战开发:手把手教你照片墙实战开发》和《CSS3基本属性之Transition详解》。经过这两个教程的学习，相信你对这些知识点都会了如指掌了。
现在我们运行一下页面：
至此，《百度新闻热搜词特效》就开发完了，大家说是不是很简单呢。
往期精彩实战开发案例一览(已被广为转载，下面只列出部分)：
1. 《CSS3实战开发:手把手教你鼠标滑动特效开发》
2. 《CSS3实战开发：手把手教大家搜索表单发光特效实战开发》
3. 《CSS3实战开发: 弹性盒模型之响应式WEB界面设计》
4. 《CSS3线性渐变技术详解及超炫按钮实战开发》
5. 《CSS3 2D转换之translate技术详解 及 网页导航实战开发》
6. 《CSS3实战开发:手把手教你照片墙实战开发》
7. 《CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效》
8. 《CSS3实战开发:仿天猫首页图片展示动画特效实战开发》
9. 《CSS3实战开发:手把手教大家折角效果实战开发》
欢迎大家加入互联网技术交流群：62329335
个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证。
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Empat alat pengaturcaraan berbantukan AI yang disyorkan
Apr 22, 2024 pm 05:34 PM
Alat pengaturcaraan berbantukan AI ini telah menemui sejumlah besar alat pengaturcaraan berbantukan AI yang berguna dalam peringkat pembangunan AI yang pesat ini. Alat pengaturcaraan berbantukan AI boleh meningkatkan kecekapan pembangunan, meningkatkan kualiti kod dan mengurangkan kadar pepijat Ia adalah pembantu penting dalam proses pembangunan perisian moden. Hari ini Dayao akan berkongsi dengan anda 4 alat pengaturcaraan berbantukan AI (dan semua menyokong bahasa C# saya harap ia akan membantu semua orang). https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot ialah pembantu pengekodan AI yang membantu anda menulis kod dengan lebih pantas dan dengan sedikit usaha, supaya anda boleh lebih memfokuskan pada penyelesaian masalah dan kerjasama. Git
Pengaturcara AI manakah yang terbaik? Terokai potensi Devin, Tongyi Lingma dan ejen SWE
Apr 07, 2024 am 09:10 AM
Pada 3 Mac 2022, kurang daripada sebulan selepas kelahiran pengaturcara AI pertama di dunia, Devin, pasukan NLP Universiti Princeton membangunkan pengaturcara AI sumber terbuka ejen SWE. Ia memanfaatkan model GPT-4 untuk menyelesaikan isu secara automatik dalam repositori GitHub. Prestasi ejen SWE pada set ujian bangku SWE adalah serupa dengan Devin, mengambil purata 93 saat dan menyelesaikan 12.29% masalah. Dengan berinteraksi dengan terminal khusus, ejen SWE boleh membuka dan mencari kandungan fail, menggunakan semakan sintaks automatik, mengedit baris tertentu dan menulis serta melaksanakan ujian. (Nota: Kandungan di atas adalah sedikit pelarasan bagi kandungan asal, tetapi maklumat utama dalam teks asal dikekalkan dan tidak melebihi had perkataan yang ditentukan.) SWE-A
Ketahui cara membangunkan aplikasi mudah alih menggunakan bahasa Go
Mar 28, 2024 pm 10:00 PM
Tutorial aplikasi mudah alih pembangunan bahasa Go Memandangkan pasaran aplikasi mudah alih terus berkembang pesat, semakin ramai pembangun mula meneroka cara menggunakan bahasa Go untuk membangunkan aplikasi mudah alih. Sebagai bahasa pengaturcaraan yang mudah dan cekap, bahasa Go juga telah menunjukkan potensi yang kukuh dalam pembangunan aplikasi mudah alih. Artikel ini akan memperkenalkan secara terperinci cara menggunakan bahasa Go untuk membangunkan aplikasi mudah alih dan melampirkan contoh kod khusus untuk membantu pembaca bermula dengan cepat dan mula membangunkan aplikasi mudah alih mereka sendiri. 1. Persediaan Sebelum memulakan, kita perlu menyediakan persekitaran dan alatan pembangunan. kepala
Praktikal PHP: Contoh Kod untuk Melaksanakan Jujukan Fibonacci dengan Pantas
Mar 20, 2024 pm 02:24 PM
Amalan PHP: Contoh Kod untuk Melaksanakan Jujukan Fibonacci dengan Pantas Jujukan Fibonacci ialah jujukan yang sangat menarik dan biasa dalam matematik Ia ditakrifkan seperti berikut: nombor pertama dan kedua ialah 0 dan 1, dan daripada yang ketiga Bermula dengan nombor, setiap nombor. ialah hasil tambah dua nombor sebelumnya. Beberapa nombor pertama dalam jujukan Fibonacci ialah 0,1,1.2,3,5,8,13,21,...dan seterusnya. Dalam PHP, kita boleh menjana jujukan Fibonacci melalui rekursi dan lelaran. Di bawah ini kami akan menunjukkan kedua-dua ini
Pengedaran Linux manakah yang terbaik untuk pembangunan Android?
Mar 14, 2024 pm 12:30 PM
Pembangunan Android ialah kerja yang sibuk dan menarik, dan amat penting untuk memilih pengedaran Linux yang sesuai untuk pembangunan. Di antara banyak pengedaran Linux, yang manakah paling sesuai untuk pembangunan Android? Artikel ini akan meneroka isu ini dari beberapa aspek dan memberikan contoh kod khusus. Mula-mula, mari kita lihat beberapa pengedaran Linux yang popular pada masa ini: Ubuntu, Fedora, Debian, CentOS, dll. Mereka semua mempunyai kelebihan dan ciri tersendiri.
Meneroka teknologi bahagian hadapan bahasa Go: visi baharu untuk pembangunan bahagian hadapan
Mar 28, 2024 pm 01:06 PM
Sebagai bahasa pengaturcaraan yang pantas dan cekap, bahasa Go popular secara meluas dalam bidang pembangunan bahagian belakang. Walau bagaimanapun, beberapa orang mengaitkan bahasa Go dengan pembangunan bahagian hadapan. Malah, menggunakan bahasa Go untuk pembangunan bahagian hadapan bukan sahaja boleh meningkatkan kecekapan, tetapi juga membawa ufuk baharu kepada pembangun. Artikel ini akan meneroka kemungkinan menggunakan bahasa Go untuk pembangunan bahagian hadapan dan memberikan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik bahagian ini. Dalam pembangunan front-end tradisional, JavaScript, HTML dan CSS sering digunakan untuk membina antara muka pengguna
Memahami VSCode: Untuk apa alat ini digunakan?
Mar 25, 2024 pm 03:06 PM
"Memahami VSCode: Untuk apa alat ini digunakan?" 》Sebagai pengaturcara, sama ada anda seorang pemula atau pembangun berpengalaman, anda tidak boleh melakukannya tanpa menggunakan alat penyuntingan kod. Di antara banyak alat penyuntingan, Kod Visual Studio (pendek kata VSCode) sangat popular di kalangan pembangun sebagai penyunting kod sumber terbuka, ringan dan berkuasa. Jadi, untuk apa sebenarnya VSCode digunakan? Artikel ini akan menyelidiki fungsi dan kegunaan VSCode dan menyediakan contoh kod khusus untuk membantu pembaca
Adakah PHP front-end atau back-end dalam pembangunan web?
Mar 24, 2024 pm 02:18 PM
PHP tergolong dalam bahagian belakang dalam pembangunan web. PHP ialah bahasa skrip sebelah pelayan, terutamanya digunakan untuk memproses logik sebelah pelayan dan menjana kandungan web dinamik. Berbanding dengan teknologi bahagian hadapan, PHP lebih banyak digunakan untuk operasi bahagian belakang seperti berinteraksi dengan pangkalan data, memproses permintaan pengguna dan menjana kandungan halaman. Seterusnya, contoh kod khusus akan digunakan untuk menggambarkan aplikasi PHP dalam pembangunan back-end. Mula-mula, mari kita lihat contoh kod PHP mudah untuk menyambung ke pangkalan data dan menanyakan data:
