Web Front-end
HTML Tutorial
CSS3 practical development: Baidu news hot search word special effects practical development_html/css_WEB-ITnose
CSS3 practical development: Baidu news hot search word special effects practical development_html/css_WEB-ITnose
Jun 24, 2016 am 11:59 AM
Dear netizens, in today’s article, I will lead you step by step in developing the "Hot News Search Words" special effect on Baidu News homepage. The knowledge points applied in this special effect are very basic. If you are still unclear about these, you can follow the detailed tutorials I wrote before. When I talk about this case today, I also want to tell everyone that when developing a special effect, please don’t complicate the problem. Maybe some people really don’t know where to start at the beginning, but after you finish reading this tutorial, you will definitely feel that everything is so simple.
Maybe some people don’t know this special effect yet, so I won’t say anything more and just go to the renderings:
From the above special effects, it is not difficult to find that when When the mouse moves over the hot search words, a translucent black background will slide up, and there are also hot search words in this black area.
After roughly knowing these details, I will now lead you step by step in developing this special effect.
Based on the key details mentioned above, write the html code as follows:
<!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ì)見外國友人</a> <a class="detail" href="http://www.itdriver.cn">習(xí) 近 平會(huì)見外國友人</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ī)場辱工作人員</a> <a class="detail" href="http://www.itdriver.cn">EXO機(jī)場辱工作人員</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>
You will find from the html source code that two hot search terms appear This is because one is used for normal display and the other is used for the black area that slides up when the mouse is moved over. Here I will temporarily define their styles as .hotwords_li_a and detail, and our keywords will be displayed using an unordered list (ul).
After the page code is written, let’s run it first to see the current effect:
After the page elements are ready, then we add styles to the page. First What we need to do is to first clear the default style of the unordered list (ul), and set the outer container layout to facilitate demonstration. The style code is as follows:
*{ /*設(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; } Run the page to see the page effect at this time:
The basic layout of the outer container and the layout of all elements After the default style setting is completed, now we can implement the regional style of hot news search words:
.hotwords li{ float:left; /*使熱搜詞都向左浮動(dòng)*/ position:relative; /*由于li里面有元素要執(zhí)行動(dòng)畫效果，所以將li的position設(shè)置為相對定位*/ 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 { /*對于1,4,9和12這幾個(gè)元素它的文字是垂直方向上居中顯示的*/ width:135px; line-height:64px;}.hotwords li.li_color_0{ background:#0DA4D6;}.hotwords li.li_color_1{ background:#35C4EF;}
The above style code is mainly to set For the style of the hot search word area li, if you don’t know much about the code, you can refer to my style comments.
The effect at this time is as follows:
You can find that in the style I demonstrated at the beginning, the title information of the hot news search term is light blue, and at the same time The hot search word area displays two lines. Now let’s add the following settings to display the style of the hot search word area:
.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;} The page style at this time is as follows:
When we mouse over these hot search terms, nothing changes. Okay, then we apply styles to the elements of type detail on the page:
.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; /*當(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;} In the above code, we mainly use two key attributes, position:absolute and transition. If you don’t know much about these two, you can refer to the tutorials I wrote before "CSS3 Practical Development: Teach You Step by Step Practical Development of Photo Walls" and "CSS3 Basic Properties of Transition Detailed explanation》. After studying these two tutorials, I believe you will be familiar with these knowledge points.
Now let’s run the page:
At this point, the "Baidu News Hot Search Words Special Effect" has been developed. Isn’t it very simple?
A list of exciting practical development cases in the past ( has been widely reproduced, only some are listed below ):
1. "CSS3 practical development: step by step Teach you the development of mouse sliding special effects》
2. "CSS3 practical development: teach you step by step the practical development of search form lighting special effects"
3. "CSS3 Practical Development: Responsive WEB Interface Design of Flexible Box Model"
4. "CSS3 Linear Gradient Technology Detailed Explanation and Stunning Button Practical Development"
5. "CSS3 2D conversion - detailed explanation of translate technology and practical development of web navigation"
6. "CSS3 practical development: teach you step-by-step practical development of photo wall"
7. 《CSS3 practical development: teach you step by step how to develop mouse-over picture animation special effects》
8. 《CSS3 practical development: imitating Tmall Home page picture shows practical development of animation special effects》
9. 《CSS3 practical development: teach you step by step the practical development of folding effect》
Welcome everyone to join Internet technology exchange group: 62329335
Personal statement: The blog posts shared are absolutely original, and we strive to verify every knowledge point through practical demonstrations.
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Four recommended AI-assisted programming tools
Apr 22, 2024 pm 05:34 PM
This AI-assisted programming tool has unearthed a large number of useful AI-assisted programming tools in this stage of rapid AI development. AI-assisted programming tools can improve development efficiency, improve code quality, and reduce bug rates. They are important assistants in the modern software development process. Today Dayao will share with you 4 AI-assisted programming tools (and all support C# language). I hope it will be helpful to everyone. https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot is an AI coding assistant that helps you write code faster and with less effort, so you can focus more on problem solving and collaboration. Git
Which AI programmer is the best? Explore the potential of Devin, Tongyi Lingma and SWE-agent
Apr 07, 2024 am 09:10 AM
On March 3, 2022, less than a month after the birth of the world's first AI programmer Devin, the NLP team of Princeton University developed an open source AI programmer SWE-agent. It leverages the GPT-4 model to automatically resolve issues in GitHub repositories. SWE-agent's performance on the SWE-bench test set is similar to Devin, taking an average of 93 seconds and solving 12.29% of the problems. By interacting with a dedicated terminal, SWE-agent can open and search file contents, use automatic syntax checking, edit specific lines, and write and execute tests. (Note: The above content is a slight adjustment of the original content, but the key information in the original text is retained and does not exceed the specified word limit.) SWE-A
Learn how to develop mobile applications using Go language
Mar 28, 2024 pm 10:00 PM
Go language development mobile application tutorial As the mobile application market continues to boom, more and more developers are beginning to explore how to use Go language to develop mobile applications. As a simple and efficient programming language, Go language has also shown strong potential in mobile application development. This article will introduce in detail how to use Go language to develop mobile applications, and attach specific code examples to help readers get started quickly and start developing their own mobile applications. 1. Preparation Before starting, we need to prepare the development environment and tools. head
Exploring Go language front-end technology: a new vision for front-end development
Mar 28, 2024 pm 01:06 PM
As a fast and efficient programming language, Go language is widely popular in the field of back-end development. However, few people associate Go language with front-end development. In fact, using Go language for front-end development can not only improve efficiency, but also bring new horizons to developers. This article will explore the possibility of using the Go language for front-end development and provide specific code examples to help readers better understand this area. In traditional front-end development, JavaScript, HTML, and CSS are often used to build user interfaces
PHP Practical: Code Example to Quickly Implement Fibonacci Sequence
Mar 20, 2024 pm 02:24 PM
PHP Practice: Code Example to Quickly Implement the Fibonacci Sequence The Fibonacci Sequence is a very interesting and common sequence in mathematics. It is defined as follows: the first and second numbers are 0 and 1, and from the third Starting with numbers, each number is the sum of the previous two numbers. The first few numbers in the Fibonacci sequence are 0,1,1.2,3,5,8,13,21,...and so on. In PHP, we can generate the Fibonacci sequence through recursion and iteration. Below we will show these two
Which Linux distribution is best for Android development?
Mar 14, 2024 pm 12:30 PM
Android development is a busy and exciting job, and choosing a suitable Linux distribution for development is particularly important. Among the many Linux distributions, which one is most suitable for Android development? This article will explore this issue from several aspects and give specific code examples. First, let’s take a look at several currently popular Linux distributions: Ubuntu, Fedora, Debian, CentOS, etc. They all have their own advantages and characteristics.
Which framework is best suited for VSCode development?
Mar 25, 2024 pm 02:03 PM
VSCode is a powerful, flexible, and easy-to-extend open source code editor that is widely favored by developers. It supports many programming languages ??and frameworks to meet different project needs. However, the advantages of VSCode may be different for different frameworks. This article will discuss the applicability of VSCode in the development of different frameworks and provide specific code examples. 1.ReactReact is a popular JavaScript library used for building user interfaces. When developing projects using React,
Golang dynamic library practice: case sharing and practical skills
Mar 01, 2024 am 08:30 AM
Golang dynamic library practice: case sharing and practical skills In Golang (Go language), using dynamic libraries can achieve functions such as modular development, code reuse, and dynamic loading. This article will introduce how to use dynamic libraries in Golang through case sharing and practical tips, and how to use dynamic libraries to improve the flexibility and maintainability of code. What is a dynamic library A dynamic library is a file that contains functions and data that can be loaded at runtime. Unlike static libraries that need to be linked into the application at compile time, dynamic libraries can be
