中心向周围扩散的css圆圈,动画效果

<!DOCTYPE html>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
<style>  
@keyframes warn {  
    0% {  
        transform: scale(0);  
        opacity: 0.0;  
    }  
    25% {  
        transform: scale(0);  
        opacity: 0.1;  
    }  
    50% {  
        transform: scale(0.1);  
        opacity: 0.3;  
    }  
    75% {  
        transform: scale(0.5);  
        opacity: 0.5;  
    }  
    100% {  
        transform: scale(1);  
        opacity: 0.0;  
    }  
}  
@-webkit-keyframes "warn" {  
    0% {  
        -webkit-transform: scale(0);  
        opacity: 0.0;  
    }  
    25% {  
        -webkit-transform: scale(0);  
        opacity: 0.1;  
    }  
    50% {  
        -webkit-transform: scale(0.1);  
        opacity: 0.3;  
    }  
    75% {  
        -webkit-transform: scale(0.5);  
        opacity: 0.5;  
    }  
    100% {  
        -webkit-transform: scale(1);  
        opacity: 0.0;  
    }  
}  
  
.container {  
    position: relative;  
    width: 40px;  
    height: 40px;  
    border: 1px solid #000;  
}  
/* 保持大小不变的小圆圈  */  
.dot {  
    position: absolute;  
    width: 6px;  
    height: 6px;  
    left: 15px;  
    top: 15px;  
    -webkit-border-radius: 20px;  
    -moz-border-radius: 20px;  
    border: 2px solid red;  
    border-radius: 20px;  
    z-index: 2;  
}  
/* 产生动画(向外扩散变大)的圆圈  */  
.pulse {  
    position: absolute;  
    width: 24px;   
    height: 24px;  
    left: 2px;  
    top: 2px;  
    border: 6px solid red;  
    -webkit-border-radius: 30px;  
    -moz-border-radius: 30px;  
    border-radius: 30px;  
    z-index: 1;  
    opacity: 0;  
    -webkit-animation: warn 3s ease-out;  
    -moz-animation: warn 3s ease-out;  
    animation: warn 3s ease-out;  
    -webkit-animation-iteration-count: infinite;  
    -moz-animation-iteration-count: infinite;  
    animation-iteration-count: infinite;  
}  
</style>  
  
</head>  
  
<body>  
<div class="container">  
    <div class="dot"></div>  
    <div class="pulse"></div>  
</div>  
</body>  
</html>  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值