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

This article mainly explains "the realization of sharing CSS project hover transition animation trilogy". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "the realization of sharing CSS project hover transition animation trilogy".

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; / * Set the Width of box * / height:50px; / * Set the Height of box * / background:#424242; / * Dark Grey Background color * / transition:all 0.25s ease; / * Transition settings * / display: flex / * Use Flexbox on P * / align-items: center; / * Center P * / justify-content: center; / * Center P * / margin: 10px; / * Apply a margin around our Box * /}

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.

Holly high! Now that the preparations are in place, the next step is to add the transition effect. So far, div should look like this.

Fading effect

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

FADE HERE

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:all 0.25s ease; in a class called box. Take a look at the following to see if it is a good fading effect:

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.

COLOR HERE

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 actual effect is as follows:

3. Shake together.

Next, let's achieve a wobble effect. This effect is slightly more complex to implement than the previous two examples. In this example, I will use @ keyframes to do it.

Keyframes-- gives you the magic of controlling the intermediate steps in a CSS animation sequence.

First of all, again, you must be tired of listening to create a div element without adding a class called wiggle:

WIGGLE WIGGLE

Next, all we have to do is create an animation with @ keyframes. Let's first give the animation a name, wiggle. And add the implementation of the dithering effect in the following code:

@ keyframes wiggle {20% {transform: translateX (4px);} 40% {transform: translateX (- 4px);} 60% {transform: translateX (2px);} 80% {transform: translateX (- 1px);} 100% {transform: translateX (0);}}

As you can see from the above code, @ keyframes gives us the ability to break down the animation into single steps and define exactly what happens at each step. Specify the progress of the animation as a percentage:

The 20%--div moves the 4px to the right relative to the initial position.

The 40%--div moves to the left of the 4px relative to the initial position.

The 60%--div moves the 2px to the right relative to the initial position.

The 80%--div moves to the left of the 1px relative to the initial position.

The 100%--div is restored to its original position.

Now we can use the: hover selector to show the animation of wiggle:

.wiggle: hover {animation: wiggle 1s ease; animation-iteration-count: 1;}

We set animation to wiggle. At the same time, we want the animation to last for 1 second and use the animation effect of ease.

Finally, specify that the animation is triggered each time the mouse pointer hovers.

The following is the final animation:

Thank you for your reading, the above is the content of "sharing the realization of the CSS project hover transition animation trilogy". After the study of this article, I believe you have a deeper understanding of the realization of the sharing CSS project hover transition animation trilogy, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.