CSS3 dynamic prompt effect when mouse moves into picture-CSS Tutorial-php.cn

This article mainly introduces a brief discussion of the CSS3 dynamic prompt effect (transform) when the mouse moves into the image. The content is quite good. I will share it with you now and give it as a reference.

This is my first time trying to write a blog. I hope you can correct me if I have any mistakes or mistakes. Today I mainly write about some usage of transform, an important property of CSS3. These examples are from previous MOOCs. I typed it myself after taking a course from a certain teacher online.

1. Introduction

1. What is transform?

The meaning of transform is: change, deform...; transform

2. What are the common attributes of transform?

The properties of transform include: translate()/rotate() / skew() / scale() /, and they are divided into x and y respectively, such as: rotatex() and rotatey(), And so on.

transform:translate()

Meaning: change, displacement; for example, 20 pixels to the right and 50 pixels to the top (negative values to the left and down). Examples are as follows

.test01{-webkit-transform:translate(20px,50px);-moz-transform:translate(20px,50px)}

Copy after login

transform:rotate()

Meaning: rotation; "deg" is the degree of rotation. For example, "180deg" means rotation of "180 degrees". Examples are as follows

.test02{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}

Copy after login

transform:skew()

Meaning: Skew Examples are as follows

.test03{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

Copy after login

transform:scale()

Meaning: Ratio 1.8 means enlarging at a ratio of 1.8. If it is an integer multiple, such as enlarging 3 times, it must be written as 3.0. The example is as follows

.test03{-webkit-transform:scale(2.5);-moz-transform:scale(2.5)}

Copy after login

3. Example of transform

demo01 Description: After the mouse is moved in, the image moves to the left and the content enters in sequence

Steps:

1. Write the html code and set the initial style of the content and pictures through css (the text content is all on the picture);

2. Displace the description content through the transform attribute Until the left side is no longer visible (transform:translate(-600px,0););

3. Next, set the style when the mouse moves in (:hover). Also use transform to move the content to the left. is 0 (transform:translate(0,0)) The transition-delay attribute is used here mainly to delay the three contents for different times to form the effect of entering in sequence.

/*图片左移 文字依次进入*/
.test1{background: #fff;}
.test1 figcaption p{background: #fff;color:#333;margin:5px 0;transform: translate(-600px,0px);}
.test1 figcaption{padding:20px}
.test1:hover figcaption p{transform: translate(0,0);}

.test1 figcaption p:nth-of-type(1){transition-delay: 0.2s;}
.test1 figcaption p:nth-of-type(2){transition-delay: 0.3s;}
.test1 figcaption p:nth-of-type(3){transition-delay: 0.4s;}
.test1:hover img{transform: translate(-5px,0);}

Copy after login

        <!--移动-->
        <figure class="test1">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>图片标题</h2>
                <p>这里是图片的相关描述内容</p>
                <p>这里是图片的相关描述内容</p>
                <p>这里是图片的相关描述内容</p>
            </figcaption>
        </figure>

Copy after login

demo02 Description: After the mouse is moved in, the picture becomes blurry and the rectangle is rotated from outside the picture into the specified picture. The position text flies over from the right and gradually displays

Steps:

1. Write the html code and set the initial style of the content and pictures through css (The rectangular text is all on the picture);

2. Use the transform attribute to move the rectangle to the top until it cannot be seen and set the rotation angle to 0 transform: translate(0,-400px) rotate(0deg);

3. Next set the style displacement when the mouse moves in (:hover) to 0 and rotate 360 degrees transform: translate(0,0) rotate(360deg);

/*旋转*/
.test2{background: #ccc;}
.test2 figcaption{width: 100%;height: 100%;}
.test2 figcaption h2{margin:15% 0 0 15%}
.test2 figcaption p{margin-left:15%;transform: translate(50px,0);opacity: 0;}
.test2 figcaption p{border:2px solid #ccc;width: 80%;height: 80%;position:absolute;top:10%;left:10%;transform: translate(0,-400px) rotate(0deg);}
.test2:hover figcaption p{transform: translate(0,0) rotate(360deg);}
.test2:hover img{opacity: 0.6;}
.test2:hover figcaption p{transform: translate(0,0);opacity: 1;}

Copy after login

        <!--旋转-->
        <figure class="test2">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>图片标题</h2>
                <p>飞来飞去</p>


                <p></p>
            </figcaption>
        </figure>

Copy after login

demo03 Note: The distorted text is displayed normally after the mouse is moved in (because the text is distorted by 90 degrees in the example, so the text cannot be seen visually)

Steps:

1. Write the html code and set the initial style of the content and pictures through css;

2. The text content is distorted by 90 degrees transform: skew(90deg);

3. Next, set the style when the mouse moves in (:hover) to distort the text content by 0 degrees transform: skew(0);

/*扭曲*/
.test3{background:#CCCCCC;}
.test3 figcaption{position: absolute;left:15%;top:15%}
.test3 figcaption h2{transform: skew(90deg);}
.test3 figcaption p{transform: skew(90deg);}
.test3:hover img{opacity: 0.6;}
.test3:hover figcaption h2{transform: skew(0);}
.test3:hover figcaption p{transform: skew(0);}

Copy after login

        <!--扭曲-->
        <figure class="test3">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>图片标题</h2>
                <p>这里是图片的相关描述内容</p>
            </figcaption>
        </figure>

Copy after login

demo04 Description: After the mouse is moved in, the rectangle and text are displayed and reduced, and the picture is also reduced

Steps:

1. Write the html code and set the initial style of the content and pictures through css

2. Enlarge the content 1.2 times for the mouse to move in When the magnification becomes 1, the transparency of the content will be reduced to 0;

3. Next, set the style of the content when the mouse moves in (:hover). The magnification of the content will become 1, which means the original size image will be reduced. The transparency becomes 1;

/*缩放*/
.test4{background: #000;}
.test4 figcaption{width: 100%;height: 100%;}
.test4 figcaption h2{margin:15% 0 0 15%;opacity:0;transform: scale(1.2);}
.test4 figcaption p{margin-left:15%;opacity:0;transform: scale(1.2);}
.test4 figcaption p{border:2px solid #ccc;width: 80%;height: 80%;position:absolute;top:10%;left:10%;transform: scale(1.2,1.2);opacity: 0;}
.test4:hover figcaption p{transform: scale(1,1);opacity: 1;}
.test4:hover img{opacity: 0.6;transform: scale(0.9,0.9);}
.test4:hover figcaption h2{opacity: 1;transform: scale(1);}
.test4:hover figcaption p{opacity: 1;transform: scale(1);}

Copy after login

        <!--缩放-->
        <figure class="test4">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>图片标题</h2>
                <p>这里是图片的相关描述内容</p>
                <p></p>
            </figcaption>
        </figure>

Copy after login

demo05 Note: After the mouse is moved in, the content is displayed and a tic-tac-toe grid appears

Steps:

1. Write the html code and set the initial style of the content and pictures through css (tic-tac-toe is the overlap of two rectangles)

2. Shrink the two rectangles by 0.8 and set the transparency to 0. The content also sets the transparency to 0;

3.接下来设置鼠标移入时(:hover)的样式内容透明度设置为1 设置矩形缩放为1 这里利用到transition属性主要是为了缩小放大过程逐渐变化;

/*井字格*/
.test5{background: #000;}
.test5 figcaption{width: 100%;height: 100%;}
.test5 figcaption h2{margin: 15% 0 0 18%;opacity: 0;}
.test5 figcaption p{margin-left: 18%;opacity: 0;}
.test5 figcaption p{position: absolute;}
.test5 figcaption p.p01{width: 80%;height:70%;border-top: 2px solid #ccc;border-bottom: 2px solid #ccc;left:10%;top:15%;opacity: 0;transform: scale(0.8);}
.test5 figcaption p.p02{width: 70%;height:80%;border-left: 2px solid #ccc;border-right: 2px solid #ccc;left: 15%;top:10%;opacity: 0;transform: scale(0.8);}
.test5:hover p.p01{opacity: 1;transform: scale(1);transition: transform 0.3s ease-in}
.test5:hover p.p02{opacity: 1;transform: scale(1);transition: transform 0.3s ease-in}
.test5:hover figcaption p{opacity: 1;}
.test5:hover figcaption h2{opacity: 1;}
.test5:hover img{opacity: 0.6;}

Copy after login

        <!--井字格-->
        <figure class="test5">
            <img src="img/altimg05.jpg">
            <figcaption>
                <h2>图片标题</h2>
                <p>这里是图片的相关描述内容</p>
                <p class="p01"></p>
                <p class="p02"></p>
            </figcaption>
        </figure>

Copy after login

以上是几个简单的小例子，之所以用figure和figcaption标签，主要是标签的语义化，截取动态图用到的是GifCam第一次用挺好用的很可爱哈哈。

figure标签主要是用于规定独立的流内容（图片，图表，照片，代码等）而figcaption与figure标签配套使用，主要用于定义figure元素的标题

哦，对了，由于这几个例子写在一个html里面所以提取出了部分公用的样式

body,figure,figcaption,h2,p{margin:0;padding:0;font-family: "微软雅黑";}
figure{position: relative;overflow: hidden;float: left;width:33.33%;height: 350px;}
figcaption{position: absolute;top: 0;left: 0;color:#fff;}
figure img{width:101%;height: 360px;opacity: 0.8;transition: all 0.35s}
figure figcaption p,h2,span,p{transition: all 0.35s}
@media screen and (max-width: 600px) {
    figure{width: 100%;}
}
@media screen and (min-width:601px) and (max-width: 1000px) {
    figure{width: 50%;}
}
@media screen and (min-width: 1001px) {
    figure{width: 33.33%;}
}

Copy after login

总结：

之所以选择写博客主要是为了锻炼自己的表达能力，培养一个总结知识点的好习惯，以前看别人写的一些好的文章时都很羡慕，自己却总是不知道从何下手，直到最近投简历的时候发现很多公司都要求注明自己的博客地址，所以有必要逼着自己写一下东西啦！

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！