How to use css to achieve a circular effect? (code example)-CSS Tutorial-php.cn

How to use css to achieve a circular effect? (code example)

云罗郡主

Release： 2018-10-23 15:13:40

forward

2177 people have browsed it

The content of this article is about how to use css to achieve a circular effect? (Code example) has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

We knew before that CSS3 animation effects consist of three major parts: transformation, transition and animation. In the first 2 chapters, we have explained the deformation effect and transition effect in detail. In this chapter we will explain the "real" animation effect in CSS3.

In CSS3, animation effects are implemented using the animation attribute. The animation attribute and the transition attribute have the same function. They both achieve animation effects by changing the "attribute value" of the element. But there is a big difference between the two: the transition attribute can only achieve animation effects by specifying the start value and end value of the attribute, and then making a smooth transition between the two attribute values, so only simple animation effects can be achieved. . The animation property implements 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 it involves the answer to the most confusing question for novices: "What is the difference between the animation attribute and the transition attribute?" You may not understand it at first, but after reading this chapter, you must come back and read it carefully!

Let’s take an example first to let everyone feel the magic of CSS3 animation effects.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3动画</title>
    <style type="text/css">
        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;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Copy after login

The preview effect in the browser is as follows:

How to use css to achieve a circular effect? (code example)

Analysis:

As you can see, there is a div element here with its background The color is red. When the mouse pointer moves over the div element, the background color of the element will undergo a series of changes from red to blue, from blue to yellow, and from yellow back to red.

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

The above is about how to use css to achieve a circular effect? (Code examples) full introduction, if you want to know more about CSS3 video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to use css to achieve a circular effect? (code example). For more information, please follow other related articles on the PHP Chinese website!