Code sharing using css3 to realize the animation effect of a circle spreading from the center to the surroundings-CSS Tutorial-php.cn

Code sharing using css3 to realize the animation effect of a circle spreading from the center to the surroundings

黄舟

Release： 2017-05-25 10:26:58

Original

5373 people have browsed it

Let’s take a simple example first, for example:

@
key
frames hovertreemove
{
from {
top
:30px;}
to {top:130px;}
}

Copy after login

You can create animation through @keyframes rules.

The principle of creating animation is to gradually change one set of CSS styles into another set of styles.
You can change this set of CSS styles multiple times during the animation.
Specify the time when the change occurs as a percentage, or through the keywords "from" and "to", which are equivalent to 0% and 100%.
0% is the start time of the animation, 100% is the end time of the animation.
For best browser support, you should always define 0% and 100% selectors.

The following is the code for up and down movement:

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>css3使用animation和@keyframes制作动画_何问起</title>
    <meta charset="utf-8" />
    <style>@keyframes hovertreemove{from {top:30px;}to {top:130px;}}
#hovertreekf{
    width:80px;height:80px;
    border:1px solid red;
    position:absolute;
    background:url(http://hovertree.com/themes/hvtimages/smile.png) no-repeat center;
    animation:hovertreemove /*动画样式名称*/
        1s /*动画时间*/
    linear /*线性运动*/
        infinite /*无限播放*/
        alternate/*往返动画*/;}
  a{color:blue;text-decoration:none;}  </style></head><body><a href="http://hovertree.com/h/bjaf/i309b77d.htm" target="_blank">说明</a>
    <p id="hovertreekf"></p></body></html>

Copy after login

The following is the code for circular diffusion movement:

<!DOCTYPE html><html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>纯css3圆形从中心向四周扩散动画效果_何问起</title>
    <style>
        @keyframes warn {
            0% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.0;
            }

            25% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.1;
            }

            50% {
                transform: scale(0.5);
                -webkit-transform: scale(0.5);
                opacity: 0.3;
            }

            75% {
                transform: scale(0.8);
                -webkit-transform: scale(0.8);
                opacity: 0.5;
            }

            100% {
                transform: scale(1);
                -webkit-transform: scale(1);
                opacity: 0.0;
            }
        }

        @keyframes warn1 {
            0% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.0;
            }

            25% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.1;
            }

            50% {
                transform: scale(0.3);
                -webkit-transform: scale(0.3);
                opacity: 0.3;
            }

            75% {
                transform: scale(0.5);
                -webkit-transform: scale(0.5);
                opacity: 0.5;
            }

            100% {
                transform: scale(0.8);
                -webkit-transform: scale(0.8);
                opacity: 0.0;
            }
        }

        .container {
            position: relative;
            width: 40px;
            height: 40px;
            /*border: 1px solid #000; hovertree.com */
        }
        /* 保持大小不变的小圆圈 何问起 */
        .dot {
            position: absolute;
            width: 92px;
            height: 92px;
            left: 120px;
            top: 120px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border: 2px solid red;
            border-radius: 50%;
            z-index: 2;
        }
        /* 产生动画（向外扩散变大）的圆圈  */
        .pulse {
            position: absolute;
            width: 320px;
            height: 320px;
            left: 2px;
            top: 2px;
            border: 6px solid red;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            z-index: 1;
            opacity: 0;
            -webkit-animation: warn 2s ease-out;
            -moz-animation: warn 2s ease-out;
            animation: warn 2s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            box-shadow: 1px 1px 30px red;
        }

        .pulse1 {
            position: absolute;
            width: 320px;
            height: 320px;
            left: 2px;
            top: 2px;
            border: 6px solid red;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            z-index: 1;
            opacity: 0;
            -webkit-animation: warn1 2s ease-out;
            -moz-animation: warn1 2s ease-out;
            animation: warn1 2s ease-out;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            box-shadow: 1px 1px 30px red;
        }a{color:blue;text-decoration:none;}
    </style></head><body><a href="http://hovertree.com/h/bjaf/i309b77d.htm" target="_blank">说明</a>
    <p class="container">
        <p class="dot"></p>
        <p class="pulse"></p>
        <p class="pulse1"></p>
    </p></body></html>

Copy after login

The above is the detailed content of Code sharing using css3 to realize the animation effect of a circle spreading from the center to the surroundings. For more information, please follow other related articles on the PHP Chinese website!