纯css3圆形从中心向四周扩散动画效果

2016/12/14 8:38:39 阅读：2283 发布者：2283

查看效果：

先来个简单的示例，例如：

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

效果：

可以通过 @keyframes 规则，创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

以下为上下运动的代码：

<!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(images/smile.png) no-repeat center; 
    animation:hovertreemove /*动画样式名称*/ 
        1s /*动画时间*/ 
    linear /*线性运动*/ 
        infinite /*无线播放*/ 
        alternate/*往返动画*/; 
} 
  a{color:blue;text-decoration:none;}  </style> 
</head> 
<body><a href="bjaf/i309b77d.htm" target="_blank">说明</a> 
    <div id="hovertreekf"></div> 
</body> 
</html>

以下为圆形扩散运动的代码：

<!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="bjaf/i309b77d.htm" target="_blank">说明</a> 
    <div class="container"> 
        <div class="dot"></div> 
        <div class="pulse"></div> 
        <div class="pulse1"></div> 
    </div> 
</body> 
</html>

上一篇关于:hover div

下一篇 flex 弹性布局

纯css3圆形从中心向四周扩散动画效果

文章分类

相关新闻

热门标签