Web Front-end
HTML Tutorial
CSS3 practical development: Pure CSS to implement image filtering, classification and display effects_html/css_WEB-ITnose
CSS3 practical development: Pure CSS to implement image filtering, classification and display effects_html/css_WEB-ITnose
Hello netizens, today I will lead you to develop a pure CSS image classification display URL navigation. You may be a little confused just by looking at the title. According to past practice, I will first demonstrate the actual operation effect for you:
From the above operation effect, it is not difficult to find that when I click on a menu, the navigation area will highlight the icons of this category accordingly, while other icons will dim .
Many people may say that this is so simple. You can quickly achieve the same effect by directly using front-end frameworks such as javascript or jQuery and some CSS. If you are one of these people, I also hope you will stop and read this tutorial. Because in today's tutorial, I will use another way of thinking to think about the problem. I will lead you to completely break away from js and how to achieve switching effects and image classification, aiming to teach you an idea.
Okay, no more nonsense, let’s start today’s practical development tutorial.
First, we define the html page. The code is as follows (for the convenience of demonstration, I directly imported the styles.css file. At this time, the file does not have any style content):
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css"> <title>CSS3实战开发:图片过滤分类特效</title> </head> <body> <div class="container"> <div class="hot_navs"> <div class="hot_title"> <input id="selector-type-all" type="radio" name="title_set" class="selector-type-all" checked="checked" /> <label for="selector-type-all" class="label-type-all">全部类别</label> <input id="selector-type-1" type="radio" name="title_set" class="selector-type-1" /> <label for="selector-type-1" class="label-type-1">电子商务</label> <input id="selector-type-2" type="radio" name="title_set" class="selector-type-2" /> <label for="selector-type-2" class="label-type-2">旅游</label> <input id="selector-type-3" type="radio" name="title_set" class="selector-type-3" /> <label for="selector-type-3" class="label-type-3">社交</label> <input id="selector-type-4" type="radio" name="title_set" class="selector-type-4" /> <label for="selector-type-4" class="label-type-4">视频</label> <input id="selector-type-5" type="radio" name="title_set" class="selector-type-5" /> <label for="selector-type-5" class="label-type-5">新闻</label> <input id="selector-type-6" type="radio" name="title_set" class="selector-type-6" /> <label for="selector-type-6" class="label-type-6">信息门户</label> <input id="selector-type-7" type="radio" name="title_set" class="selector-type-7" /> <label for="selector-type-7" class="label-type-7">票务</label> <div class="splitline"></div> <a class="item-type-1" href="http://www.itdriver.cn"> <img src="imgs/101.png" /> </a> <a class="item-type-1" href="http://www.itdriver.cn"> <img src="imgs/102.png" /> </a> <a class="item-type-7" href="http://www.itdriver.cn"> <i></i> <img src="imgs/103.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <img src="imgs/104.png" /> </a> <a class="item-type-5" href="http://www.itdriver.cn"> <img src="imgs/105.png" /> </a> <a class="item-type-4" href="http://www.itdriver.cn"> <img src="imgs/106.png" /> </a> <a class="item-type-3" href="http://www.itdriver.cn"> <i></i> <img src="imgs/107.png" /> </a> <a class="item-type-4" href="http://www.itdriver.cn"> <i></i> <img src="imgs/108.png" /> </a> <a class="item-type-3" href="http://www.itdriver.cn"> <i></i> <img src="imgs/109.png" /> </a> <a class="item-type-3" href="http://www.itdriver.cn"> <i></i> <img src="imgs/110.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="imgs/111.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="imgs/112.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="imgs/113.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="imgs/114.png" /> </a> <a class="item-type-1" href="http://www.itdriver.cn"> <i></i> <img src="imgs/115.png" /> </a> <a class="item-type-5" href="http://www.itdriver.cn"> <i></i> <img src="imgs/116.png" /> </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="imgs/117.png" /> </a> <a class="item-type-2" href="http://www.itdriver.cn"> <i></i> <img src="imgs/118.png" /> </a> </div> </div> </div> </body></html>
You will find from the above html code that my navigation menu uses label or radio tags. Why should I define them? Because I want to know which menu I currently clicked, because with CSS alone, we It seems that there is no way to know who is currently clicked, so when I click on the Label, a certain radio will be automatically selected.
At this point, let’s run the page to see how it works without adding any styles:
First, let’s adjust the size of the navigation area and add The border and style code are as follows:
*{ /*设置页面基本属性*/ margin:0; padding:0; font-size:14px;}.container{ /*调整外围容器布局*/ margin:200px auto; width:1024px;}.hot_navs{ /*设置分类导航样式*/ border:1px solid #CCCCCC; padding:.5em; width:725px;}The page effect at this time is as follows:
The size of the area has been determined, now we need to Set styles for the navigation menu, hide the radio buttons, and set the dividing line between the menu and the chart:
/*分割线*/.hot_navs .splitline { margin-bottom:4px;height:1px;border-top:1px dotted #999999; }.hot_navs a{ /*设置导航item的基本样式*/ text-decoration:none; display:inline-block; height:70px; line-height:70px; position:relative; background:#FFE500; -webkit-transition:all 0.6s; /*当item属性发生变化时，执行过度动画*/ -moz-transition:all 0.6s; -o-transition:all 0.6s; transition:all 0.6s;}.hot_navs input{display:none;}.hot_navs .label-type-all,.hot_navs .label-type-1,.hot_navs .label-type-2,.hot_navs .label-type-3,.hot_navs .label-type-4,.hot_navs .label-type-5,.hot_navs .label-type-6,.hot_navs .label-type-7 { /*设置区域头部导航菜单的基本样式*/ display:inline-block; margin-top:10px; padding:10px 10px; cursor:pointer;}The effect is as follows:
Careful netizens will find that I added the transition attribute to the above CSS style. This attribute mainly means that when any attribute of the menu changes, a transition animation is executed.
Next, we add the selected style to the navigation button, and also set the icon opacity of this category to 1 when a menu is selected, and the opacity of other categories to 0.2. The style code is as follows:
.hot_navs input.selector-type-all:checked ~ .label-type-all,.hot_navs input.selector-type-1:checked ~ .label-type-1,.hot_navs input.selector-type-2:checked ~ .label-type-2,.hot_navs input.selector-type-3:checked ~ .label-type-3,.hot_navs input.selector-type-4:checked ~ .label-type-4,.hot_navs input.selector-type-5:checked ~ .label-type-5,.hot_navs input.selector-type-6:checked ~ .label-type-6,.hot_navs input.selector-type-7:checked ~ .label-type-7 { /*设置选择某一菜单时，当前菜单的基本样式*/ font-weight:bold; border-bottom:2px solid #FF9900;}.hot_navs input.selector-type-all:checked ~ a,.hot_navs input.selector-type-1:checked ~ a.item-type-1,.hot_navs input.selector-type-2:checked ~ a.item-type-2,.hot_navs input.selector-type-3:checked ~ a.item-type-3,.hot_navs input.selector-type-4:checked ~ a.item-type-4,.hot_navs input.selector-type-5:checked ~ a.item-type-5,.hot_navs input.selector-type-6:checked ~ a.item-type-6,.hot_navs input.selector-type-7:checked ~ a.item-type-7 { opacity: 1;/*当选择某一类别菜单时，设置当前类别item的不透明度*/}.hot_navs input.selector-type-1:checked ~ a:not(.item-type-1),.hot_navs input.selector-type-2:checked ~ a:not(.item-type-2),.hot_navs input.selector-type-3:checked ~ a:not(.item-type-3),.hot_navs input.selector-type-4:checked ~ a:not(.item-type-4),.hot_navs input.selector-type-5:checked ~ a:not(.item-type-5),.hot_navs input.selector-type-6:checked ~ a:not(.item-type-6),.hot_navs input.selector-type-7:checked ~ a:not(.item-type-7) { opacity: 0.2;/*当选择某一类别菜单时，设置其余类别item的不透明度*/}At this point, all the style codes for the special effects on this page have been written. I really hope everyone can be inspired, and I also hope you like my tutorial.
Thank you everyone, see you in the next practical development case.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
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
1380
52
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
How to open filtered duplicate files in Quark
Mar 01, 2024 am 11:25 AM
When using Quark Browser, there is a function to filter duplicate files. Some friends are not very familiar with this. Here I will introduce how to turn on this function. If you are interested, come and take a look with me. 1. First, click "Quark Browser" on your mobile phone to enter the interface, then click and select "Quark Network Disk" in the options in the middle of the page to open and enter. 2. Find "Backup Settings" in the lower part of the Quark network disk interface, and click to open it, as shown in the figure below: 3. Next, on the page you enter, there is a "Filter Duplicate Files", which is displayed behind it There is a switch button. Click the circular slider on it and set it to color to turn on this function. When you continue to back up files, duplicate files will be skipped to save network disk capacity.
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
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.
Understanding VSCode: What is this tool used for?
Mar 25, 2024 pm 03:06 PM
"Understanding VSCode: What is this tool used for?" 》As a programmer, whether you are a beginner or an experienced developer, you cannot do without the use of code editing tools. Among many editing tools, Visual Studio Code (VSCode for short) is very popular among developers as an open source, lightweight, and powerful code editor. So, what exactly is VSCode used for? This article will delve into the functions and uses of VSCode and provide specific code examples to help readers
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
