各位网友,今天这篇文章,我将手把手带领大家开发百度新闻首页的"新闻热搜词"特效。在这个特效中应用的知识点都很基础,如果你对这些还不清楚,可以关注我以前写的详细教程。今天讲这个案例,也是希望告诉大家,在开发一个特效的时候,请不要将问题复杂化。可能有些人一开始真的不知道从哪下手,当你看完本次教程,你定会觉得,原来一切都这么简单。
可能有些人还不知道这个特效,啥也不说了,直接上效果图:
从上面的特效中,大家不难发现,当鼠标划过热搜词时,会有一个半透明的黑色背景滑上来,而且这个黑色区域中也是有热搜词的。
大概知道这些细节后,现在我就分步骤带领大家开发这个特效。
根据上面所说的关键细节,编写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详解》。经过这两个教程的学习,相信你对这些知识点都会了如指掌了。
现在我们运行一下页面:
至此,《百度新闻热搜词特效》就开发完了,大家说是不是很简单呢。
往期精彩实战开发案例一览(已被广为转载,下面只列出部分):
2. 《CSS3实战开发:手把手教大家搜索表单发光特效实战开发》
3. 《CSS3实战开发: 弹性盒模型之响应式WEB界面设计》
5. 《CSS3 2D转换之translate技术详解 及 网页导航实战开发》
7. 《CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效》
8. 《CSS3实战开发:仿天猫首页图片展示动画特效实战开发》
欢迎大家加入互联网技术交流群:62329335
相关推荐
为了满足现有的对于 Web UI 的开发需求,它提供了一系列强大的功能,如许多新的 CSS 属性(文字,布局,颜色等等),各种 CSS 特效,甚至还支持 CSS 动画、元素的变换。这些 CSS 新特性在现阶段可以说都是非常强大和...
为了满足现有的对于 Web UI 的开发需求,它提供了一系列强大的功能,如许多新的 CSS 属性(文字,布局,颜色等等),各种 CSS 特效,甚至还支持 CSS 动画、元素的变换。这些 CSS 新特性在现阶段可以说都是非常强大和...
课程目标:本季课程引入了CSS3众多功能中的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果。整合 HTML5 & CSS3 最强大效果,有的是网站开发中常用的、实用的功能,有的是先进的 Web 技术的应用演示。...
CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块
Vue-vue入门到项目实战开发 这是一个vue入门到项目实战开发的源代码集,包括以下代码(单独的文件夹下):我的博客 Vue基础精讲 你好,世界待办事项清单vue1-实例vue2-实例的生命周期函数vue3-模板语法vue4-计算属性...
1.1 JDK开发工具包 3 1.2 Tomcat服务器 8 1.3 Linux系统配置JDK与Tomcat服务器 16 第2章 Java语言基础 20 2.1 基本语法 21 2.2 运算符 25 2.3 条件语句 29 2.4 循环控制 34 2.5 常用排序 42 2.6 算法应用 48 第3章 ...
2014/12/11 星期四 css/JAVAScript基础 2014/12/12 星期五 2014/12/13 星期六 javaScript基础&DOM 2014/12/14 星期日 javaScript基础&DOM 2014/12/15 星期一 2014/12/16 星期二 DOM/xml基础 2014/12/17 星期三 xml...
这是一个完全使用vue3.x语法开发的后台管理系统,页面主要包括CSS3特效,前端解析xlsx,前端文件下载,可拖拽的div,图表,益智小游戏,vuex4.x存储用户信息等功能,该项目基本覆盖了vue3.x全家桶的方方面面。...
2018mui教程 mui实战视频教程 web移动端开发教程+源码 课程简介: 结合MUI框架完成HTML5移动端混合应用开发(微信实战)。 本课程将介绍如何使用HTML5完成移动端混合应用开发,课程以移动端框架MUI为基础,以微信...
标签淘宝实战项目网页开发具有很多特效CSS计算机计算机
1.1 JDK开发工具包 3 1.2 Tomcat服务器 8 1.3 Linux系统配置JDK与Tomcat服务器 16 第2章 Java语言基础 20 2.1 基本语法 21 2.2 运算符 25 2.3 条件语句 29 2.4 循环控制 34 2.5 常用排序 42 2.6 算法应用 48 第3章 ...
通过这个项目,学员不仅可以在实战中巩固对前面学习的ASP.Net、ADO.Net、WinForm等知识的掌握,还可以掌握网站防黑、缓存、SEO、静态化、搜索引擎技术、AJAX等大型互联网开发中涉及到的技术。 8、.Net新技术...
书名:jQuery权威指南(系统介绍jQuery方方面面,囊括118个实例和2个综合案例,实战性强) 作者:陶国荣 著 书号:978-7-111-32543-7 定价:59.00元 出版社:机械工业出版社华章公司 出版时间:2011年1月 编辑推荐:...
HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAX本课程Lucky老师会带着你由浅入深,逐步掌握并与实战案例相结合,做到学以致用, 是作为全栈开发或者前端开发必会技能