HTML5 + CSS3 move the mouse in and out of the image to generate a random animation,

HTML5 + CSS3 move the mouse in and out of the image to generate a random animation,

Today, we will share with you how to use html + css3 + a small amount of jquery to move the mouse into and remove images to generate a random animation. Let's first look at the final result (it is a static effect, but it is dynamic)

 

Rotate left and right

 

Move up/down

Zoom

Because of the time relationship, I will not parse the meaning of each piece of code step by step. Here I will give some ideas and key code:

1. First, use ul li to display four images

In this example, not only images are used, but a piece of "WEB" text is placed on the image surface to hide or display the image. Therefore, the following content is added to the top of each image in html:

<div class="mytext">WEB</div>

2. CSS controls image and text transparency

In this example, a group of images and text are placed in a li at the same time, and the height and width are set as large as li, and their positions are fixed with absolute positioning:

#myimg ul li a div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;text-align: center;font-size: 40px;}

By default, the image is hidden, only text is displayed, and the image is displayed when the mouse is placed in li. Here, the opacity transparency attribute is used for control:

#myimg ul li a div.pic {opacity: 0;}        #myimg ul li:hover a div.pic {opacity: 1;}

3. CSS3 Custom Animation

In this example, css3 is used to define three types of animations:

@ Keyframes rot/* Custom rotation animation */{0% 20% 40% 60% 80% 100% {transform-origin: top center;} 0% {transform: rotate (0deg)} 20% {transform: rotate (-20deg)} 40% {transform: rotate (15deg)} 60% {transform: rotate (-10deg)} 80% {transform: rotate (5deg)} 100% {transform: rotate (0deg) }}@ keyframes top/* Custom up/down animation */{0% {top: 0} 20% {top: 20px} 40% {top: -15px} 60% {top: 10px} 80% {top:-5px} 100% {top: 0px }}@ keyframes sca/* Custom zoom animation */{0% {transform: scale (1)} 20% {transform: scale (1.1)} 40% {transform: scale (0.9)} 60% {transform: scale (1.05)} 80% {transform: scale (0.95)} 100% {transform: scale (1 )}}

 

Use css to execute the above Custom Animation:

#myimg ul li.rot {animation: rot 1s;}            #myimg ul li.top {animation: top 1s;}            #myimg ul li.sca {animation: sca 1s;}

 

4. Jquery generates a random animation.

When the mouse moves to ul li, jquery is used to randomly generate the above three types of custom animations. Here the hover event is used.

 

 

 

The HTML code is as follows:

<div id="myimg">            <ul>                <li>                    <a href="#">                        <div class="mytext">WEB</div>                        <div class="pic"></div>                    </a>                </li>                <li>                    <a href="#">                        <div class="mytext">WEB</div>                        <div class="pic"></div>                    </a>                </li>                <li>                    <a href="#">                        <div class="mytext">WEB</div>                        <div class="pic"></div>                    </a>                </li>                <li>                    <a href="#">                        <div class="mytext">WEB</div>                        <div class="pic"></div>                    </a>                </li>            </ul>        </div>

The CSS code is as follows:

<Style type = "text/css"> * {padding: 0; margin: 0 ;}# myimg {width: 800px; margin: 20px auto ;} # myimg ul li {list-style-type: none; position: relative; float: left; width: 350px; height: 200px; line-height: 200px; margin: 20px ;} # myimg ul li. rot {animation: rot 1 s;} # myimg ul li. top {animation: top 1 s ;}# myimg ul li. sca {animation: sca 1 s ;}# myimg ul li: hover a div. pic {opacity: 1 ;}# myimg ul li a {text-decoration: none; color: white ;}# myimg ul li a div {position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; font-size: 40px;} # myimg ul li a div. pic {opacity: 0 ;}# myimg ul li: nth-child (1) a div. mytext {background: black;} # myimg ul li: nth-child (2) a div. mytext {background: blue;} # myimg ul li: nth-child (3) a div. mytext {background: darkred;} # myimg ul li: nth-child (4) a div. mytext {background: orange;} @ keyframes rot/* Custom rotation animation */{0% 20% 40% 60% 80% 100% {transform-origin: top center;} 0% {transform: rotate (0deg)} 20% {transform: rotate (-20deg)} 40% {transform: rotate (15deg)} 60% {transform: rotate (-10deg)} 80% {transform: rotate (5deg)} 100% {transform: rotate (0deg) }}@ keyframes top/* Custom up/down animation */{0% {top: 0} 20% {top: 20px} 40% {top:-15px} 60% {top: 10px} 80% {top:-5px} 100% {top: 0px }}@ keyframes sca/* Custom scaling animation */{0% {transform: scale (1)} 20% {transform: scale (1.1)} 40% {transform: scale (0.9)} 60% {transform: scale (1.05)} 80% {transform: scale (0.95)} 100% {transform: scale (1) }}</style>

The Jquery code is as follows:

<Script type = "text/javascript"> $ (function () {var anim = ['rot', 'top', 'sca ']; var a, B; $ ("# myimg ul li "). hover (function () {// take down 0-2 integer a = anim [Math. floor (Math. random () * 3)]; while (B = a) {a = anim [Math. floor (Math. random () * 3)];} $ (this ). addClass (a); B = a ;}, function () {$ (this ). removeClass (a) ;})}); </script>

Note: To introduce the jquery file, you can select the jquery version.

Now, let's share it today. There will be more in the future. Let's talk about it together.