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

Editor to share with you how to use CSS to complete a hover transition animation project, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Project setup

In this project, we will apply the transition effect to an element whose class is box. Inside this box element is vertical and horizontal centered text content. The structure of HTML is quite simple:

TEXT

The CSS code is just as simple. We want to use sans serif fonts and make sure that the paragraph text in div is white, which can be done with the following code:

Body {

Color:white

Font-family:Helvetica,Sans-Serif

}

In addition, add the following CSS attribute to the box element:

.box {

Width:200px;/*SettheWidthofbox*/

Height:50px;/*SettheHeightofbox*/

Background:#424242;/*DarkGreyBackgroundcolor*/

Transition:all0.25sease;/*Transitionsettings*/

Display:flex;/*UseFlexboxonP*/

Align-items:center;/*CenterP*/

Justify-content:center;/*CenterP*/

Margin:10px;/*ApplyamarginaroundourBox*/

}

Whether you are familiar with the transition properties of CSS or not, let's give a brief introduction here, which is divided into three steps. . As a first step, we need to apply it to the properties of the all change. Next, set the transition time to 0.25 seconds. Finally, the animation function is selected as ease. The performance state of ease is that the process of starting and ending is relatively slow, and the transition is rapid.

Hollyhigh! Now that the preparations are in place, the next step is to add the transition effect.

1. Fading effect

First, add a faded transition. Create a new div element and add a class named fade to it:

FADEHERE

All we need to do is specify a hover rule for the fade class. We need to do this with the help of the CSS pseudo-class selector: hover. This pseudo-class selector works for all elements and activates the CSS declaration when the element is hovering over the mouse pointer. Based on this, we use the: hover selector to change the transparency of div to 0.5:

.fade: hover {

Opacity:0.5

}

It's easy. The above CSS statement specifies a hover effect for div. Here's what it looks like so far. You can see the transition style because we initially used the declaration of transition:all0.25sease; in a class called box.

two。 Let's have a look at some colors.

Specifying a discoloration transition is the same process as a fade transition. First, create a div element and add a class named color to it.

COLORHERE

Similarly, we have to use the hover selector to help us do this, but this time we are not changing the transparency but the background color:

.color: hover {

Background:#FF5722

}

The above is all the contents of this article "how to complete a hover transition animation project with CSS". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.