實(shí)戰(zhàn)互聯(lián)網(wǎng)<\/a>
photowall<\/strong>\">
photoview<\/strong>\"> <\/a>
mask<\/strong>\">實(shí)戰(zhàn)互聯(lián)網(wǎng)<\/a><\/div> <\/div>
photoview<\/strong>\"> <\/a>
mask<\/strong>\">實(shí)戰(zhàn)互聯(lián)網(wǎng)<\/a><\/div> <\/div> <\/div> <\/div> <\/body><\/html><\/pre> <\/p>

<\/p>Based on the renderings above, we can probably know which divs to edit Apply styles:

<\/p>1. Apply background paper to the wall;

<\/p>2. Apply styles to photos to achieve padding padding;

<\/p>3. Set a mask layer;

<\/p>Okay, now that you know what styles need to be made, let’s go directly to style coding!

<\/p>We first set the style for the container so that the container is displayed in the center. The code is as follows:

<\/p> 

*{ \/* 清空所有元素內(nèi)外邊距*\/    margin:0;    padding:0;}html,body,.container{ \/*設(shè)置container高度瀏覽器自適應(yīng)*\/    height:100%;    }.container { \/*設(shè)置container容器樣式*\/    width:80%;     margin:auto;    padding:10px;}<\/pre> <\/p>Next, we apply the style to the photo wall and paste it wallpaper, and set its height to 500px. The code is as follows: 
 <\/p> 
 
.photowall{    background:url(bg.png); \/*設(shè)置照片墻背景*\/    background-size:cover;  \/*設(shè)置背景以最小值填充*\/    height:500px; \/*設(shè)置照片墻的高度*\/}<\/pre> <\/p> Let’s first take a look at the running effect of the page at this time: 
 <\/p>
 <\/p>Now we apply the box model attribute of 
CSS3 to center the photo both vertically and horizontally. The code is as follows: <\/strong> <\/p> 
 
.photowall{     background:url(bg.png); \/*設(shè)置照片墻背景*\/    background-size:cover;  \/*設(shè)置背景以最小值填充*\/    height:500px; \/*設(shè)置照片墻的高度*\/        display:-webkit-box; \/*應(yīng)用盒子模型*\/    display:-moz-box;    display:-o-box;    display:box;        -webkit-box-pack:center; \/*使盒子內(nèi)元素水平居中*\/    -moz-box-pack:center;    -o-box-pack:center;    box-pack:center;        -webkit-box-align:center; \/* 設(shè)置盒子內(nèi)元素垂直方向上居中分配空間*\/    -moz-box-align:center;    -o-box-align:center;    box-align:center;}<\/pre> <\/p>Next, we Add a shadow effect to the photo, and set the inner border of the photo. The code is as follows: 
 <\/p>
 <\/p> 
 <\/p>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 <\/strong>transition attribute) If you understand, please follow my other blog posts), the code is as follows: <\/strong> <\/p> 
 
.photoview .mask{    position:absolute; \/*由于父容器設(shè)置了position:relative,所以子元素可以相對父容器做絕對定位*\/    top:0;    left:0;        height: 216px; \/*設(shè)置遮蓋物的寬高*\/    line-height:216px;    width: 332px;        display: inline-block;        background:rgba(0, 0, 0, 0.7); \/*設(shè)置背景半透明*\/            opacity:0; \/*設(shè)置遮蓋物為透明的*\/    visibility:hidden; \/*設(shè)置遮蓋物是不可見可見的*\/        -moz-transition:all 0.4s ease-in-out; \/*設(shè)置transition屬性，一旦遮蓋物屬性發(fā)生變化時，進(jìn)行平滑動畫過度*\/    -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;}<\/pre> <\/p>At this time, let’s run the page and see the current page display effect: 
 <\/p> 
 <\/p>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: 
 <\/p> 
 
.photoview .mask a{    background:url(link.png) center no-repeat; \/*給遮蓋物上的a標(biāo)簽應(yīng)用樣式*\/    display:inline-block;    height:20px;    width:20px;    overflow:hidden;    text-decoration: none;    text-indent:-9999;    opacity:0; \/*設(shè)置a標(biāo)簽?zāi)J(rèn)為透明*\/    -moz-transition:all 0.3s ease-in-out; \/*一旦a標(biāo)簽屬性發(fā)生變化時，進(jìn)行平滑動畫過度*\/    -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;}<\/pre> <\/p> 
 <\/p> 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. 
 <\/p>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: <\/strong> <\/p> 
 
.photoview:hover .mask { \/*當(dāng)鼠標(biāo)劃過照片時，將遮蓋物設(shè)為不透明，將遮蓋物可見的*\/   opacity: 1;   background:rgba(0, 0, 0, 0.7);   visibility:visible;}<\/pre> <\/p> For the search icon, in order to display For better animation effects, we also set it up for her: delay 0.3s to execute the animation, the code is as follows: 
 <\/p> 
 
.photoview:hover .mask  a{ \/*當(dāng)鼠標(biāo)劃過照片時，將a標(biāo)簽設(shè)為不透明，且延遲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;}<\/pre> <\/p> At this point, the code is written, now we come Take a look at the effect: 
 <\/p>
 <\/p>As expected, the effect we expected was achieved. 
 <\/p>Of course, for the search icon delay effect, we can also directly use the compound method, and the effect of 
 <\/p> 
-moz-transition:all 0.3s ease-in-out;修改為<\/pre> 
-moz-transition:all 0.3s ease-in-out 0.3s<\/strong>;最后的0.3s代表動畫效果，延時多長時間后執(zhí)行。<\/pre> is the same as above. I will not lead you here. Demonstrated. <\/p>\n
 <\/p>That’s it for this tutorial, thank you all for reading. 
 <\/p> 
 <\/p>\n
Welcome to join the Internet technology exchange group: 62329335 <\/strong> <\/p> 
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.  <\/strong> <\/p> 
 <\/p>"}	
	







亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

	


    



	
	

		

			

							

					

						Home
						
												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

							
							Jun 24, 2016 pm	 12:00 PM
															

																			css3
																			animation
																			Actual combat
																			develop
																			special effects
																	

														
						

					

					

					

						

						
						
						

					
 


 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,鼠標(biāo)劃過動畫效果,css3實(shí)戰(zhàn)開發(fā),css3案例" />        <title>css3實(shí)現(xiàn)鼠標(biāo)劃過圖片時效果(1)</title>    </head>    <body>    　　<a href="http://www.itdriver.cn">實(shí)戰(zhàn)互聯(lián)網(wǎng)</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">實(shí)戰(zhàn)互聯(lián)網(wǎng)</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">實(shí)戰(zhàn)互聯(lián)網(wǎng)</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: 
 
 
 
*{ /* 清空所有元素內(nèi)外邊距*/    margin:0;    padding:0;}html,body,.container{ /*設(shè)置container高度瀏覽器自適應(yīng)*/    height:100%;    }.container { /*設(shè)置container容器樣式*/    width:80%;     margin:auto;    padding:10px;}
 
Next, we apply the style to the photo wall and paste it wallpaper, and set its height to 500px. The code is as follows: 
 
 
 
.photowall{    background:url(bg.png); /*設(shè)置照片墻背景*/    background-size:cover;  /*設(shè)置背景以最小值填充*/    height:500px; /*設(shè)置照片墻的高度*/}
 
 Let’s first take a look at the running effect of the page at this time: 
 
 
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); /*設(shè)置照片墻背景*/    background-size:cover;  /*設(shè)置背景以最小值填充*/    height:500px; /*設(shè)置照片墻的高度*/        display:-webkit-box; /*應(yīng)用盒子模型*/    display:-moz-box;    display:-o-box;    display:box;        -webkit-box-pack:center; /*使盒子內(nèi)元素水平居中*/    -moz-box-pack:center;    -o-box-pack:center;    box-pack:center;        -webkit-box-align:center; /* 設(shè)置盒子內(nèi)元素垂直方向上居中分配空間*/    -moz-box-align:center;    -o-box-align:center;    box-align:center;}
 
Next, we Add a shadow effect to the photo, and set the inner border of the photo. The code is as follows: 
 
 
 
 
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; /*由于父容器設(shè)置了position:relative,所以子元素可以相對父容器做絕對定位*/    top:0;    left:0;        height: 216px; /*設(shè)置遮蓋物的寬高*/    line-height:216px;    width: 332px;        display: inline-block;        background:rgba(0, 0, 0, 0.7); /*設(shè)置背景半透明*/            opacity:0; /*設(shè)置遮蓋物為透明的*/    visibility:hidden; /*設(shè)置遮蓋物是不可見可見的*/        -moz-transition:all 0.4s ease-in-out; /*設(shè)置transition屬性，一旦遮蓋物屬性發(fā)生變化時，進(jìn)行平滑動畫過度*/    -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;}
 
At this time, let’s run the page and see the current page display effect: 
 
 
 
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標(biāo)簽應(yīng)用樣式*/    display:inline-block;    height:20px;    width:20px;    overflow:hidden;    text-decoration: none;    text-indent:-9999;    opacity:0; /*設(shè)置a標(biāo)簽?zāi)J(rèn)為透明*/    -moz-transition:all 0.3s ease-in-out; /*一旦a標(biāo)簽屬性發(fā)生變化時，進(jìn)行平滑動畫過度*/    -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 { /*當(dāng)鼠標(biāo)劃過照片時，將遮蓋物設(shè)為不透明，將遮蓋物可見的*/   opacity: 1;   background:rgba(0, 0, 0, 0.7);   visibility:visible;}
 
 For the search icon, in order to display For better animation effects, we also set it up for her: delay 0.3s to execute the animation, the code is as follows: 
 
 
 
.photoview:hover .mask  a{ /*當(dāng)鼠標(biāo)劃過照片時，將a標(biāo)簽設(shè)為不透明，且延遲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;}
 
 At this point, the code is written, now we come Take a look at the effect: 
 
 
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代表動畫效果，延時多長時間后執(zhí)行。
 is the same as above. I will not lead you here. Demonstrated. 


 
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.   
 
 



						

					

					

						
Statement of this Website

						
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

					

				


				



				



				
    


					


											

							

								

									
									
Hot AI Tools

								

								

																		

											
												Undress AI Tool
											
											

												
													
Undress AI Tool

												
												
Undress images for free

											

										

																		

											
												Undresser.AI Undress
											
											

												
													
Undresser.AI Undress

												
												
AI-powered app for creating realistic nude photos

											

										

																		

											
												AI Clothes Remover
											
											

												
													
AI Clothes Remover

												
												
Online AI tool for removing clothes from photos.

											

										

																		

											
												Clothoff.io
											
											

												
													
Clothoff.io

												
												
AI clothes remover

											

										

																		

											
												Video Face Swap
											
											

												
													
Video Face Swap

												
												
Swap faces in any video effortlessly with our completely free AI face swap tool!

											

										

																

								
							

						

					

					

					


											

							

								

									
									
Hot Tools

								

								

																		

											
												Notepad++7.3.1
											
											

												
													
Notepad++7.3.1

												
												
Easy-to-use and free code editor

											

										

																			

											
												SublimeText3 Chinese version
											
											

												
													
SublimeText3 Chinese version

												
												
Chinese version, very easy to use

											

										

																			

											
												Zend Studio 13.0.1
											
											

												
													
Zend Studio 13.0.1

												
												
Powerful PHP integrated development environment

											

										

																			

											
												Dreamweaver CS6
											
											

												
													
Dreamweaver CS6

												
												
Visual web development tools

											

										

																			

											
												SublimeText3 Mac version
											
											

												
													
SublimeText3 Mac version

												
												
God-level code editing software (SublimeText3)

											

										

																	

								
							

						

										

					
					
				

			

							

					

						
						


													

								
									Four recommended AI-assisted programming tools
								
								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

							

														

								
									Learn how to develop mobile applications using Go language
								
								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
								
								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

							

														

								
									How to set up ppt animation to enter first and then exit
								
								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 [

							

														

								
									PHP Practical: Code Example to Quickly Implement Fibonacci Sequence
								
								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

							

														

								
									Exploring Go language front-end technology: a new vision for front-end development
								
								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

							

														

								
									Which Linux distribution is best for Android development?
								
								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?
								
								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,

							

													


													
								See all articles