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

This article mainly introduces how to use pure CSS code to achieve the hover animation effect of the background when switching buttons, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand it.

Code interpretation

Define dom, with an unordered list in the navigation and a list item in the list:

Home

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background-color:teal

}

Hide the boot symbol at the front of the list item:

Navul {

Padding:0

List-style-type:none

}

Define the button container size:

: root {

Font-size:10px

}

Navli {

Width:20rem

Height:7rem

}

Set the text style:

Navli {

Font-size:20px

Text-align:center

Line-height:7rem

Font-family:sans-serif

Text-transform:uppercase

Letter-spacing:1px

}

Make 2 background color blocks with pseudo elements:

Navli {

Position:relative

}

Navli::before

Navli::after {

Content:''

Position:absolute

Width:inherit

Height:inherit

Top:0

Left:0

}

Navli::before {

Background-color:white

Z-index:-1

}

Navli::after {

Background-color:goldenrod

Z-index:-2

}

Offset the back background block to the lower right, and let the front background block cast shadows to increase the stereoscopic effect:

Navli::before {

Box-shadow:0.2rem0.2rem0.5remrgba (0Pert 00.2pm)

}

Navli::after {

Transform:translate (1.5 remand 1.5 rem)

}

Next, add the hover effect.

If you set the ease time, both the main element and the pseudo element will have an ease effect:

Navli {

Transition:0.3s

}

Navli::before

Navli::after {

Transition:0.3s

}

When hovering, the colors of the two background colors are interchangeable:

Navli:hover::before {

Background-color:goldenrod

}

Navli:hover::after {

Background-color:white

}

At the same time, the background color block behind moves to the upper left, and the button as a whole moves to the lower right:

Navli:hover {

Transform:translate (1.5 remand 1.5 rem)

}

Navli:hover::after {

Transform:translate (- 1.5remmmer 1.5rem)

}

At the same time, let the text change color when hovering:

Navli:hover {

Color:white

}

Add a few more buttons:

Home

Products

Services

Contact

Finally, increase the spacing between the buttons:

Navli {

Margin:3rem

}

Thank you for reading this article carefully. I hope the article "how to use pure CSS code to achieve the background hover animation effect when switching buttons" is helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.