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

This article mainly explains "how to use css to achieve circular effect", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use css to achieve a circular effect.

In CSS3, animation is achieved using the animation property. The animation attribute and the transition attribute function are the same, and the animation effect is achieved by changing the "attribute value" of the element. But there is a big difference between the two: the transition attribute can only achieve animation by specifying the start and end values of the attribute, and then making a smooth transition between the two attribute values, so it can only achieve simple animation effects. The animation attribute achieves complex animation effects by defining multiple keyframes and defining the attribute values of the elements in each Keyframe.

The above paragraph is very valuable and involves the answer to the most confusing question for beginners, "what's the difference between the animation property and the transition property?" You may not understand it at first, but you must come back and have a good look at it after reading this chapter.

Let's start with an example to let you feel the magic of CSS3 animation.

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

twenty-five

twenty-six

twenty-seven

twenty-eight

twenty-nine

thirty

thirty-one

CSS3 animation

Div

{

Width:100px

Height:100px

Border-radius:50px

Background-color:red

}

@-webkit-keyframes mycolor

{

0% {background-color:red;}

30% {background-color:blue;}

60% {background-color:yellow;}

100% {background-color:green;}

}

Div:hover

{

-webkit-animation-name:mycolor

-webkit-animation-duration:5s

-webkit-animation-timing-function:linear

}

The preview effect in the browser is as follows:

Analysis:

As you can see, there is a div element whose background color is red. When the mouse pointer moves over the div element, the background color of the element will go through a series of changes from red to blue, from blue to yellow, and from yellow to red.

Just imagine, if you use CSS3 to transition the transition property, can you achieve it? Of course not. Because the transition property can only achieve one change effect. We can understand that the transition property can only implement simple animation (one), while the animation property can implement complex animation (a series).

At this point, I believe you have a deeper understanding of "how to use css to achieve circular effect", might as well come to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue 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.