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
个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
四款值得推荐的AI辅助编程工具
Apr 22, 2024 pm 05:34 PM
这个AI辅助编程工具在这个AI迅速发展的阶段，挖掘出了一大批好用的AI辅助编程工具。AI辅助编程工具能够提高开发效率、改善代码质量、降低bug率，是现代软件开发过程中的重要助手。今天大姚给大家分享4款AI辅助编程工具（并且都支持C#语言），希望对大家有所帮助。https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot是一款AI编码助手，可帮助你更快、更省力地编写代码，从而将更多精力集中在问题解决和协作上。Git
AI程序员哪家强？探索Devin、通义灵码和SWE-agent的潜力
Apr 07, 2024 am 09:10 AM
2022年3月3日，距世界首个AI程序员Devin诞生不足一个月，普林斯顿大学的NLP团队开发了一个开源AI程序员SWE-agent。它利用GPT-4模型在GitHub存储库中自动解决问题。SWE-agent在SWE-bench测试集上的表现与Devin相似，平均耗时93秒，解决了12.29%的问题。SWE-agent通过与专用终端交互，可以打开、搜索文件内容，使用自动语法检查、编辑特定行，以及编写和执行测试。（注：以上内容为原内容微调，但保留了原文中的关键信息，未超过指定字数限制。）SWE-A
学习如何利用Go语言开发移动应用程序
Mar 28, 2024 pm 10:00 PM
Go语言开发移动应用程序教程随着移动应用市场的不断蓬勃发展，越来越多的开发者开始探索如何利用Go语言开发移动应用程序。作为一种简洁高效的编程语言，Go语言在移动应用开发中也展现出了强大的潜力。本文将详细介绍如何利用Go语言开发移动应用程序，并附上具体的代码示例，帮助读者快速入门并开始开发自己的移动应用。一、准备工作在开始之前，我们需要准备好开发环境和工具。首
PHP实战：快速实现斐波那契数列的代码示例
Mar 20, 2024 pm 02:24 PM
PHP实战：快速实现斐波那契数列的代码示例斐波那契数列是数学中一个非常有趣且常见的数列，其定义如下：第一个和第二个数为0和1，从第三个数开始，每个数都是前两个数的和。斐波那契数列的前几个数字依次为0,1,1.2,3,5,8,13,21,...依此类推。在PHP中，我们可以通过递归和迭代两种方式来实现斐波那契数列的生成。下面我们分别来展示这两
Android开发最适合的Linux发行版是哪个？
Mar 14, 2024 pm 12:30 PM
Android开发是一项繁忙而又令人兴奋的工作，而选择一个适合的Linux发行版来进行开发则显得尤为重要。在众多的Linux发行版中，究竟哪一个最适合Android开发呢？本文将从几个方面来探讨这一问题，并给出具体的代码示例。首先，我们来看一下目前流行的几个Linux发行版：Ubuntu、Fedora、Debian、CentOS等，它们都有各自的优点和特点。
了解VSCode：这款工具到底是用来干什么的？
Mar 25, 2024 pm 03:06 PM
《了解VSCode：这款工具到底是用来干什么的？》作为一个程序员，无论是初学者还是资深开发者，都离不开代码编辑工具的使用。在众多编辑工具中，VisualStudioCode（简称VSCode）作为一款开源、轻量级、强大的代码编辑器备受开发者欢迎。那么，VSCode到底是用来干什么的？本文将深入探讨VSCode的功能和用途，并提供具体的代码示例，以帮助读者
Go语言前端技术探秘：前端开发新视野
Mar 28, 2024 pm 01:06 PM
Go语言作为一种快速、高效的编程语言，在后端开发领域广受欢迎。然而，很少有人将Go语言与前端开发联系起来。事实上，使用Go语言进行前端开发不仅可以提高效率，还能为开发者带来全新的视野。本文将探讨使用Go语言进行前端开发的可能性，并提供具体的代码示例，帮助读者更好地了解这一领域。在传统的前端开发中，通常会使用JavaScript、HTML和CSS来构建用户界面
PHP在Web开发中是属于前端还是后端？
Mar 24, 2024 pm 02:18 PM
PHP在Web开发中是属于后端。PHP是一种服务器端脚本语言，主要用于处理服务器端的逻辑，生成动态网页内容。与前端技术相比，PHP更多地用于与数据库交互、处理用户请求以及生成页面内容等后端操作。接下来通过具体的代码示例来说明PHP在后端开发中的应用。首先，我们来看一个简单的PHP代码示例，用于连接数据库并查询数据：
