<!doctype html>
<html>
<head>
<style>
.round01{
42px;
height: 42px;
border-radius: 50px;
position: relative;
border:2px solid rgba(145,139,157,0);
animation: one-myfirst 2s ease 3s infinite alternate;
/*animation:动画的名称 动画完成的时间 规定动画的速度曲线 定义播放的次数0|infinite 动画是否逆向回放*alternate|normal*/
}
.round01:hover{background: red;}
.round02{
position: absolute;
top: 9px;
left: 9px;
42px;
height: 42px;
border-radius: 42px;
background: red;
}
@keyframes one-myfirst
{
/*xx%表示完成的百分比*/
50% {
60px;
height: 60px;
border:2px solid rgba(145,139,157,0.5);
}
}
</style>
</head>
<body>
<div class="round01">
<div class="round02">
<span></span>
</div>
</div>
</div>
</html>
效果图