使用css3实现圆形从中心向四周扩散的动画效果的代码分享

2020-11-27 来源：飒榕旅游知识分享网

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

@
key
frames 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(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>

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

<!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>

显示全文

全部栏目

使用css3实现圆形从中心向四周扩散的动画效果的代码分享