Web Front-endHTML TutorialCSS3 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="/static/imghwm/default1.png" data-src="img01.jpg" class="lazy" style="max-width:90%" style="max-width:90%" / alt="CSS3 Practical Development: Teach you step by step how to develop mouse-over picture animation effects (Part 2)_html/css_WEB-ITnose" ></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="/static/imghwm/default1.png" data-src="img02.jpg" class="lazy" style="max-width:90%" style="max-width:90%" / alt="CSS3 Practical Development: Teach you step by step how to develop mouse-over picture animation effects (Part 2)_html/css_WEB-ITnose" ></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;} 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); /*设置照片墙背景*/ background-size:cover; /*设置背景以最小值填充*/ height:500px; /*设置照片墙的高度*/} 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); /*设置照片墙背景*/ 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;} 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; /*由于父容器设置了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;} 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标签应用样式*/ 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;} 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{ /*当鼠标划过照片时，将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;} 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代表动画效果，延时多长时间后执行。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.
如何加速Windows 11中的动画效果：2种方法解析Apr 24, 2023 pm 04:55 PM当微软推出Windows11时，它带来了许多变化。其中一项更改是增加了用户界面动画的数量。一些用户想要改变事物的出现方式，他们必须想办法去做。拥有动画让用户感觉更好、更友好。动画使用视觉效果使计算机看起来更具吸引力和响应能力。其中一些包括几秒钟或几分钟后的滑动菜单。计算机上有许多动画会影响PC性能、减慢速度并影响您的工作。在这种情况下，您必须关闭动画。本文将介绍用户可以提高其在PC上的动画速度的几种方法。您可以使用注册表编辑器或您运行的自定义文件来应用更改。如何提高Windows11动画的
如何使用Vue实现打字机动画特效Sep 19, 2023 am 09:33 AM如何使用Vue实现打字机动画特效打字机动画是一种常见且引人注目的特效，常用于网站的标题、标语等文字展示上。在Vue中，我们可以通过使用Vue自定义指令来实现打字机动画效果。本文将详细介绍如何使用Vue来实现这一特效，并提供具体的代码示例。步骤1：创建Vue项目首先，我们需要创建一个Vue项目。可以使用VueCLI来快速创建一个新的Vue项目，或者手动在HT
主线动画《明日方舟：冬隐归路》定档 PV 公布，10 月 7 日上线Sep 23, 2023 am 11:37 AM本站需要重新写作的内容是：9需要重新写作的内容是：月需要重新写作的内容是：23需要重新写作的内容是：日消息，动画剧集《明日方舟》的第二季主线剧《明日方舟：冬隐归路》公布定档需要重新写作的内容是：PV，将于需要重新写作的内容是：10需要重新写作的内容是：月需要重新写作的内容是：7需要重新写作的内容是：日需要重新写作的内容是：00:23需要重新写作的内容是：正式上线，点此进入主题官网。需要重新写作的内容是：本站注意到，《明日方舟：冬隐归路》是《明日方舟：黎明前奏》的续作，剧情简介如下：为阻止感染者组
如何在 Windows 11 中禁用动画Apr 16, 2023 pm 11:34 PMMicrosoftWindows11中包含多项新特性和功能。用户界面已更新，公司还引入了一些新效果。默认情况下，动画效果应用于控件和其他对象。我应该禁用这些动画吗？尽管Windows11具有视觉上吸引人的动画和淡入淡出效果，但它们可能会导致您的计算机对某些用户来说感觉迟钝，因为它们会为某些任务增加一点延迟。关闭动画以获得更灵敏的用户体验很简单。在我们看到对操作系统进行了哪些其他更改后，我们将引导您了解在Windows11中打开或关闭动画效果的方法。我们还有一篇关于如何在Windows
原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！
怎样在Windows 11的测试设置中启用图标动画？Apr 24, 2023 pm 11:28 PM微软正在Windows11中试验新的任务栏动画，这是这家软件巨头正在进行的另一项新测试。这一次在设置应用程序中，当您单击相应部分时，图标会显示动画。以下是如何在Windows11中为“设置”应用启用图标动画。您可以在Windows11中看到特殊的动画和动画效果。例如，当您最小化和最大化设置应用程序或文件资源管理器时，您会注意到动画。说到图标，当您最小化窗口时，您会看到一个图标会向下弹起，而在您最大化或恢复时，它会弹起。Windows11设置可能会新收到左侧显示的导航图标动画，这是您
Vue中如何实现图片的闪烁和旋转动画？Aug 17, 2023 pm 12:37 PMVue中如何实现图片的闪烁和旋转动画Vue.js是目前非常流行的前端框架之一，它提供了强大的工具来管理和展示页面中的数据。在Vue中，我们可以通过添加CSS样式和动画来使元素产生各种各样的效果。本文将介绍如何使用Vue和CSS来实现图片的闪烁和旋转动画。首先，我们需要准备一张图片，可以是本地的图片文件或者网络上的图片地址。我们将使用<img>标
Midjourney 5.2震撼发布！原画生成3D场景，无限缩放无垠宇宙Jun 25, 2023 pm 06:55 PMMidjourney和StableDiffusion，已经卷到没边了！几乎在StableDiffusionXL0.9发布的同一时间，Midjourney宣布推出了5.2版本。此次5.2版本最亮眼的更新在于zoomout功能，它可以无限扩展原始图像，同时保持跟原始图像的细节相同。用zoomout做出的无垠宇宙动画，直接让人震惊到失语，可以说，Midjourney5.2看得比詹姆斯韦伯太空望远镜还要远！这个极其强大的功能，可以创造出非常神奇的图片，甚至还能被用来拍摄毫无破绽的高清变焦视频！这个「核弹
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
Dreamweaver CS6
Visual web development tools
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
WebStorm Mac version
Useful JavaScript development tools
Atom editor mac version download
The most popular open source editor
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
