Web Front-end
HTML Tutorial
CSS3 Practical Development: Teach you step by step how to develop mouse-over picture animation effects (Part 2)_html/css_WEB-ITnose
CSS3 Practical Development: Teach you step by step how to develop mouse-over picture animation effects (Part 2)_html/css_WEB-ITnose
Dear netizens, hello, everyone, I am Mo Shang Hua Huai, known as Mo Mo. In the previous article "CSS3 Practical Development: Teach you step-by-step practical development of mouse-over picture animation special effects" , I have led you step by step in developing an animation effect when the mouse rolls over.
In this article, I will lead you to develop another animation special effect. I hope you can be inspired. As usual, I do not provide source code for download, but I can guarantee that as long as you copy the code in this tutorial to your local computer step by step, you will get the same operating effect as the original poster.Okay, without further ado, let’s get straight into today’s study. The author is a lazy person, so I still use the material in the previous article.
First, let’s take a look at the special effects we need to implement today:
1. Before the mouse passes over:
2. When the mouse passes over , first smoothly displays the gray cover background, and then smoothly transitions to display the search icon:
After viewing the renderings, go directly to the
CSS3 actual combat of this article Let’s travel!
First, we edit the html code:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles"> <meta name="keywords" content="css,css3,鼠标划过动画效果,css3实战开发,css3案例" /> <title>css3实现鼠标划过图片时效果(1)</title> </head> <body> <a href="http://www.itdriver.cn">实战互联网</a> <div class="container"> <div class="<strong>photowall</strong>"> <div class="<strong>photoview</strong>"> <a href="http://www.itdriver.cn"><img src="img01.jpg" width="320" height="200" /></a> <div class="<strong>mask</strong>"><a href="http://www.itdriver.cn">实战互联网</a></div> </div> <div class="<strong>photoview</strong>"> <a href="http://www.itdriver.cn"><img src="img02.jpg" width="320" height="200" /></a> <div class="<strong>mask</strong>"><a href="http://www.itdriver.cn">实战互联网</a></div> </div> </div> </div> </body></html>
Based on the renderings above, we can probably know which divs to edit Apply styles:
1. Apply background paper to the wall;
2. Apply styles to photos to achieve padding padding;
3. Set a mask layer;
Okay, now that you know what styles need to be made, let’s go directly to style coding!
We first set the style for the container so that the container is displayed in the center. The code is as follows:
*{ /* 清空所有元素内外边距*/ margin:0; padding:0;}html,body,.container{ /*设置container高度浏览器自适应*/ height:100%; }.container { /*设置container容器样式*/ width:80%; margin:auto; padding:10px;}
.photowall{ background:url(bg.png); /*设置照片墙背景*/ background-size:cover; /*设置背景以最小值填充*/ height:500px; /*设置照片墙的高度*/}
Now we apply the box model attribute of
CSS3 to center the photo both vertically and horizontally. The code is as follows:
.photowall{ background:url(bg.png); /*设置照片墙背景*/ background-size:cover; /*设置背景以最小值填充*/ height:500px; /*设置照片墙的高度*/ display:-webkit-box; /*应用盒子模型*/ display:-moz-box; display:-o-box; display:box; -webkit-box-pack:center; /*使盒子内元素水平居中*/ -moz-box-pack:center; -o-box-pack:center; box-pack:center; -webkit-box-align:center; /* 设置盒子内元素垂直方向上居中分配空间*/ -moz-box-align:center; -o-box-align:center; box-align:center;}
The general appearance of the photo has come out, and then we adjust the size of the cover , and use absolute positioning (the parent container has used relative positioning), adjust the position of the cover mask, and apply the
transition attribute to the cover (if you are not too familiar with the transition attribute) If you understand, please follow my other blog posts), the code is as follows:
.photoview .mask{ position:absolute; /*由于父容器设置了position:relative,所以子元素可以相对父容器做绝对定位*/ top:0; left:0; height: 216px; /*设置遮盖物的宽高*/ line-height:216px; width: 332px; display: inline-block; background:rgba(0, 0, 0, 0.7); /*设置背景半透明*/ opacity:0; /*设置遮盖物为透明的*/ visibility:hidden; /*设置遮盖物是不可见可见的*/ -moz-transition:all 0.4s ease-in-out; /*设置transition属性，一旦遮盖物属性发生变化时，进行平滑动画过度*/ -webkit-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; -ms-transition:all 0.4s ease-in-out; transition:all 0.4s ease-in-out;}
Now let’s add the search icon, because we want to add animation effects to the image, so I now add the transition attribute to the a tag, the code is as follows:
.photoview .mask a{ background:url(link.png) center no-repeat; /*给遮盖物上的a标签应用样式*/ display:inline-block; height:20px; width:20px; overflow:hidden; text-decoration: none; text-indent:-9999; opacity:0; /*设置a标签默认为透明*/ -moz-transition:all 0.3s ease-in-out; /*一旦a标签属性发生变化时，进行平滑动画过度*/ -webkit-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; -ms-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;}Regarding the transition attribute, here I will give you a brief introduction. When an element is applied with the transition attribute, if the attributes of this element change due to an event in the future, it will be smoothed. Animated transition effects. This is exactly what we are looking forward to, so I added this attribute to the cover and search icon that need to be animated above.
According to the effect I showed you at the beginning "
2. When the mouse moves over, the gray cover background will be displayed smoothly first, and then the search icon will be displayed with a smooth transition: ", so here we give the photo Add a hover event. When the mouse moves over the photo, we reset the attributes of the cover and the search icon respectively. The code is as follows:
.photoview:hover .mask { /*当鼠标划过照片时，将遮盖物设为不透明，将遮盖物可见的*/ opacity: 1; background:rgba(0, 0, 0, 0.7); visibility:visible;}
.photoview:hover .mask a{ /*当鼠标划过照片时，将a标签设为不透明，且延迟0.3秒显示*/ opacity: 1; -moz-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; -ms-transition-delay: 0.3s; transition-delay: 0.3s;}
As expected, the effect we expected was achieved.
Of course, for the search icon delay effect, we can also directly use the compound method, and the effect of
-moz-transition:all 0.3s ease-in-out;修改为
-moz-transition:all 0.3s ease-in-out <strong>0.3s</strong>;最后的0.3s代表动画效果，延时多长时间后执行。
That’s it for this tutorial, thank you all for reading.
Welcome to join the Internet technology exchange group: 62329335
Personal statement: The blog posts shared are absolutely original, and we strive to make every one of them original. Knowledge points are verified through practical demonstrations.
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
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 set up ppt animation to enter first and then exit
Mar 20, 2024 am 09:30 AM
We often use ppt in our daily work, so are you familiar with every operating function in ppt? For example: How to set animation effects in ppt, how to set switching effects, and what is the effect duration of each animation? Can each slide play automatically, enter and then exit the ppt animation, etc. In this issue, I will first share with you the specific steps of entering and then exiting the ppt animation. It is below. Friends, come and take a look. Look! 1. First, we open ppt on the computer, click outside the text box to select the text box (as shown in the red circle in the figure below). 2. Then, click [Animation] in the menu bar and select the [Erase] effect (as shown in the red circle in the figure). 3. Next, click [
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
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
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
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
Is PHP front-end or back-end in web development?
Mar 24, 2024 pm 02:18 PM
PHP belongs to the backend in web development. PHP is a server-side scripting language, mainly used to process server-side logic and generate dynamic web content. Compared with front-end technology, PHP is more used for back-end operations such as interacting with databases, processing user requests, and generating page content. Next, specific code examples will be used to illustrate the application of PHP in back-end development. First, let's look at a simple PHP code example for connecting to a database and querying data:
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
