网站建设
 
设为首页 收藏本站 
用户ID/邮箱: 密 码:
客户中心 Customer service 您目前的位置:首 页 > 客户中心 > DIV+CSS 



DIV+CSS,网站建设DIV+CSS:纯css3圆形从中心向四周扩散动画效果

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

查看效果:

先来个简单的示例,例如:

@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
下一条: 百度对网页内容大小和字符有要求吗
相关文章
css常用属性总结之 id和class的区别,使用类还是ID?
关于左边固定,右边自适应布局的响应式布局写法
html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切
前端页面隐藏元素
URL怎么优化
URL优化方法
css中的三种基本定位机制
css常用属性总结之 id和class的区别,使用类还是ID?
关于左边固定,右边自适应布局的响应式布局写法
html实现 页面禁止右键 禁止复制 禁止图片拖动 禁止复制和剪切
推广经验分享
其它
网站建设资源
常见问题
网站知识
快速导航 Fast Navigation
网站建设投诉建议
投诉建议
网站建设客户服中心
客服中心
网站建设付款中心
付款方式
网站优化中心
网站优化
网站建设套餐
网站建设

网站价值

轻松一刻
站长工具
站长工具

积分兑换
网站首页关于我们业务范围新闻资讯成功案例客服中心联系我们深圳网站建设网站优化付款帐户
文档下载:网站建设服务协议 | 网站建设报价 | 网站备案资料 | 网页设计软件 | PhotoShop(图片处理) | FTP网页上传/下传软件
深圳网站建设公司专业提供各种营销型网页设计\网站优化服务... 【老字号】、重庆、广州、东莞、深圳网站建设
网页设计登陆 | 网站建设 | 网页设计 | 网站优化 | 网站地图 | 专业的深圳网站建设,深圳网站优化,网页设计,网站建设开发团队
COPYRIGHT(C) 2005-2018 亚网互联·中国 版权所有 ALL RIGHTS RESERVED  ( 粤ICP备15005241号 ) 来访IP:54.224.83.221
深圳网站建设公司地址:深圳市宝安区龙华民治大道东明大厦1529-1531 室     E-Mail:sales@yanet.cn   web@yanet.cn  
公司电话:0755-89812581(8线)   4006-800535
深圳市博士通科技有限公司