CSS3 Practical Development: Teach you step by step how to develop mouse-over picture animation effects (Part 2)_html/css

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>

Copy after login

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;}

Copy after login

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; /*设置照片墙的高度*/}

Copy after login

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;}

Copy after login

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;}

Copy after login

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;}

Copy after login

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;}

Copy after login

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;}

Copy after login

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;修改为

Copy after login

-moz-transition:all 0.3s ease-in-out <strong>0.3s</strong>;最后的0.3s代表动画效果，延时多长时间后执行。

Copy after login

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.

CSS3 Practical Development: Teach you step by step how to develop mouse-over picture animation effects (Part 2)_html/css_WEB-ITnose