Shulou(Shulou.com)05/31 Report--

This article mainly introduces how to achieve a vertical drop-down animation menu in css3 related knowledge, the content is detailed and easy to understand, the operation is simple and fast, with a certain reference value, I believe you will have something to gain after reading this css3 article on how to achieve a vertical drop-down animation menu, let's take a look.

The code is as follows:

Home

Sweet home

About us

Sweet home

Features

Sweet home

News

Sweet home

Blog

What they say

Mission

Our Team

Leyla Sparks

Gleb Ismailov

About

Skills

Viktoria Gibbers

Rewards

Certificates

Portfolio

Sweet home

Contacts

Drop a line

Here the basic structure of the menu is constructed using ul.

Then use CSS3 code to achieve the menu drop-down and animation effects.

CSS code is more cumbersome, here I just provide some core CSS code, the complete code you can download at the end of the article to learn.

This is the animation code when the mouse is over the menu item:

The code is as follows:

. mcd-menu li an i,. Mcd-menu li a strong,. Mcd-menu li a small {

Position: relative

Transition: all 300ms linear

-o-transition: all 300ms linear

-ms-transition: all 300ms linear

-moz-transition: all 300ms linear

-webkit-transition: all 300ms linear

}

.mcd-menu li:hover > an I {

Opacity: 1

-webkit-animation: moveFromTop 300ms ease-in-out

-moz-animation: moveFromTop 300ms ease-in-out

-ms-animation: moveFromTop 300ms ease-in-out

-o-animation: moveFromTop 300ms ease-in-out

Animation: moveFromTop 300ms ease-in-out

}

. mcd-menu li:hover a strong {

Opacity: 1

-webkit-animation: moveFromLeft 300ms ease-in-out

-moz-animation: moveFromLeft 300ms ease-in-out

-ms-animation: moveFromLeft 300ms ease-in-out

-o-animation: moveFromLeft 300ms ease-in-out

Animation: moveFromLeft 300ms ease-in-out

}

. mcd-menu li:hover a small {

Opacity: 1

-webkit-animation: moveFromRight 300ms ease-in-out

-moz-animation: moveFromRight 300ms ease-in-out

-ms-animation: moveFromRight 300ms ease-in-out

-o-animation: moveFromRight 300ms ease-in-out

Animation: moveFromRight 300ms ease-in-out

}

.mcd-menu li:hover > a {

Color: # e67e22

}

The following defines the animation of the text icon sliding over the mouse, drawn from the top, from the left, and from the right:

The code is as follows:

@-webkit-keyframes moveFromTop {

From {

Opacity: 0

-webkit-transform: translateY (200%)

-moz-transform: translateY (200%)

-ms-transform: translateY (200%)

-o-transform: translateY (200%)

Transform: translateY (200%)

}

To {

Opacity: 1

-webkit-transform: translateY (0%)

-moz-transform: translateY (0%)

-ms-transform: translateY (0%)

-o-transform: translateY (0%)

Transform: translateY (0%)

}

}

@-webkit-keyframes moveFromLeft {

From {

Opacity: 0

-webkit-transform: translateX (200%)

-moz-transform: translateX (200%)

-ms-transform: translateX (200%)

-o-transform: translateX (200%)

Transform: translateX (200%)

}

To {

Opacity: 1

-webkit-transform: translateX (0%)

-moz-transform: translateX (0%)

-ms-transform: translateX (0%)

-o-transform: translateX (0%)

Transform: translateX (0%)

}

}

@-webkit-keyframes moveFromRight {

From {

Opacity: 0

-webkit-transform: translateX (- 200%)

-moz-transform: translateX (- 200%)

-ms-transform: translateX (- 200%)

-o-transform: translateX (- 200%)

Transform: translateX (- 200%)

}

To {

Opacity: 1

-webkit-transform: translateX (0%)

-moz-transform: translateX (0%)

-ms-transform: translateX (0%)

-o-transform: translateX (0%)

Transform: translateX (0%)

}

}

This is the end of the article on "how to implement a vertical drop-down animation menu in css3". Thank you for reading! I believe you all have a certain understanding of "how to achieve a vertical drop-down animation menu in css3". If you want to learn more, you are welcome to follow the industry information channel.

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.