Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to write the CSS3 simple golden egg style". The editor shows you the operation process through the actual case, the operation method is simple and fast, and the practicality is strong. I hope this "CSS3 simple golden egg style how to write" article can help you solve the problem.

Implementation style:

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

2, the user smashes the golden egg, the hammer simple raises the effect.

3. Smash the golden egg and display the content.

Analyze the implementation steps:

1. Insert a golden egg in html

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

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

There are only several mouse styles that come with the system, which can be modified through CSS, a simple sentence of code:

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

It is only necessary to give the prerequisite for changing the style, and here the requirement is to move the mouse into the change, that is, the change when hover:

Body > div aside label img:hover {

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

}

Url for their own choice of "hammer" style.

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

Because you can only use CSS, it can only be achieved by using the click state of the mouse (holding down the left mouse button). When the user clicks the left mouse button,

Change the mouse style of the table, just as in the previous step, except that the prerequisite for changing the style is different. This step is changed when active:

Body > div aside label img:active {

Cursor: url (". / IMG/chuizi2.png"), default

}

Note: if the hammer is raised or not, give the two hammers a picture with different angles:

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

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

First of all, smashing golden eggs is divided into two states, before and after smashing eggs, the first three steps are before smashing eggs, and the fourth step is after smashing eggs, in order to distinguish the state.

Thinking that the pseudo-class selector has two states before and after access, but it can only be used for the link label a, if it does not apply here, I think of the form form

The check box inside, it has two cases of whether it is selected or not, which is consistent with before and after smashing eggs, so it is used.

Secondly, the state is distinguished, and it becomes the state after smashing. The only way to change the content of the page is by hiding the picture on the page, and then

Show the results in the form of a background map

/ * hide the picture when selected * /

Body > div aside input:checked+label > img {

Display: none

}

/ * when selected, display the result in the way of background * /

Body > div aside input:checked+label {

Animation: zadan linear 1 8s

Background-size: 200px 200px

Background-image: url (". / IMG/dan5.jpg")

}

Note: I have animated several pictures to show: animation: zadan linear 18s, so that the transition will look better, and the animation results always show: background-image: url (". / IMG/dan5.jpg")

Here is the complete code:

Smash eggs

/ * Animation of smashing eggs * /

@ 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 the mouse * /

Body > div aside label img:active {

Cursor: url (". / IMG/chuizi2.png"), default

}

/ * hide the picture when selected * /

Body > div aside input:checked+label > img {

Display: none

}

/ * when selected, display the result in the way of background * /

Body > div aside input:checked+label {

Animation: zadan linear 1 8s

Background-size: 200px 200px

Background-image: url (". / IMG/dan5.jpg")

}

Note: the picture of chopped eggs must be custom.

This is the end of the content about "how to write the simple golden egg style of CSS3". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.