当前位置: 要听舞曲DJ网 MUSIC > DIVCSS教程 > 纯css3圆形从中心向四周扩散动画效果
250*250广告位

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

日期:2017-04-03 来源:要听舞曲DJ网 MUSIC 浏览:

查看效果:
http://hovertree.com/texiao/css3/37/

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

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

效果:
http://hovertree.com/texiao/css3/37/1.htm

可以通过 @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(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> <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="http://hovertree.com/h/bjaf/i309b77d.htm" target="_blank">说明a>     <div class="container">         <div class="dot">div>         <div class="pulse">div>         <div class="pulse1">div>     div> body> html>

上一篇:jQuery点击图片弹出大图遮罩层

下一篇:如何给div加一个边框border样式

  • 售前咨询
  • 网站建设
  • 网站优化
  • 整合营销
  • 售后服务