CSS3 simple smashing golden egg style

Implementation style:

1. After the mouse is moved in, the mouse style icon changes to "hammer".

2. Users smash golden eggs, and the hammer simply raises the effect.

3. Smash the golden egg and display the content.

 

Analysis implementation steps:

1. Insert a golden egg into html

Find a static picture or a dynamic picture with some effect and put it directly into the img tag.

 

2. Move the mouse in to change the mouse style icon

There are only a few mouse styles in the system, which can be modified through css. A simple code:

cursor: url("./IMG/chuizi1.png"), default;

Only the precondition for changing the style needs to be given. The requirement here is to move the mouse in to change, that is, change when hover:

body>div aside label img:hover {
     cursor: url("./IMG/chuizi1.png"), default;
}

The "hammer" style you choose for yourself in the url.

Computer embroidery factory http://www.szhdn.com Guangzhou brand design companyhttps://www.houdianzi.com

3. When the user smashes an egg, let the hammer rise

Because only css can be used, it can only be realized by using the click state of the mouse (holding down the left mouse button). When the user clicks the left mouse button,

Changing the mouse style of the table is the same as the previous step, except that the preconditions for changing the style are different. When this step is active, change:

body>div aside label img:active {
   cursor: url("./IMG/chuizi2.png"), default;
}

Note: if the hammer is lifted and not lifted, just give pictures with different lifting angles to the two hammers:

Move to display chuizi1, press and hold the left mouse button to display chuizi2, and there will be a visual effect of lifting the hammer.

 

4. After the user smashes the egg, the result is displayed

First, smashing golden eggs is divided into two states: before and after smashing eggs. The first three steps are the state before smashing eggs, and the fourth step is the state after smashing eggs. In order to distinguish the States,

I think that the pseudo class selector has two states before and after access, but it can only be used for link label a. This is not applicable, so I think of the form form

The check box inside can be selected or unchecked. If it is consistent with that before and after egg smashing, use it;

Secondly, the state is distinguished. It becomes the state after smashing eggs. To change the content of the page, you can only hide the pictures in the page, and then

Show the results in the form of background map

/* When selected, hides the picture */
body>div aside input:checked+label>img {
    display: none;
}
/* When selected, the results are displayed as a background */
body>div aside input:checked+label {
    animation: zadan linear 1 8s;
    background-size: 200px 200px;
   background-image: url("./IMG/dan5.jpg");
}

Note: I set the animation display of several pictures: animation: zadan linear 1 8s;, In this way, the transition result will be more beautiful, and the animation result will be fixed: background image: URL (". / img / dan5. JPG");

 

Here is the complete code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Smash eggs</title>
    <style>
        /* Egg smashing animation */
        @keyframes zadan {
            0% {
                background-image: url("./IMG/dan11.jpg");
            }

            30% {
                background-image: url("./IMG/dan2.gif");
            }

            60% {
                background-image: url("./IMG/dan3.gif");
            }

            90% {
                background-image: url("./IMG/dan4.jpg");
            }
        }

        body>div {
            width: 100%;
        }

        body>div aside {
            width: 200px;
            margin: 70px auto 0px;
            height: 200px;
        }
        /* Hide check box default style */
        body>div aside input {
            display: none;
        }

        body>div aside label {
            width: 200px;
            height: 200px;
            display: block;
        }

        body>div aside label img {
            width: 200px;
            height: 200px;
        }
        /* Move the mouse in to change the style */
        body>div aside label img:hover {
            cursor: url("./IMG/chuizi1.png"), default;
        }
        /* Style when left clicking */
        body>div aside label img:active {
            cursor: url("./IMG/chuizi2.png"), default;
        }
        /* When selected, hides the picture */
        body>div aside input:checked+label>img {
            display: none;
        }
        /* When selected, the results are displayed as a background */
        body>div aside input:checked+label {
            animation: zadan linear 1 8s;
            background-size: 200px 200px;
            background-image: url("./IMG/dan5.jpg");
        }
    </style>
</head>

<body>
    <div>

        <aside>
            <input type="checkbox" id="zadan">

            <label for="zadan">
                <img src="./IMG/dan1.jpg" alt="">
            </label>
        </aside>
    </div>

</body>

</html>

Tags: Front-end

Posted by thines on Wed, 11 May 2022 21:01:47 +0300