首页 > 代码库 > 自己写的光圈动画
自己写的光圈动画
.circle_normal {
width: 18px;
height: 18px;
margin: 0 auto;
background: #45de3c;
cursor: pointer;
display: inline-block;
position: relative;
border-radius: 50%;
}
.circle_normal:after {
content: ‘‘;
position: absolute;
width: 70px;
height: 70px;
border-radius: 50%;
/*border:1px solid rgba(69, 222, 60,0.3);*/
/*box-shadow: 0 0 1px 1px rgba(69, 222, 60,0.5);*/
top: 50%;
left: 50%;
margin-top: -35px;
margin-left: -38px;
z-index: 3;
opacity: 1;
-webkit-animation: halo 2s infinite linear;
-moz-animation: halo 2s infinite linear;
animation: halo 2s infinite linear;
}
.circle_normal:before {
content: ‘‘;
position: absolute;
width: 70px;
height: 70px;
border-radius: 50%;
/*border:1px solid rgba(69, 222, 60,0.3);*/
/*box-shadow: 0 0 1px 1px rgba(69, 222, 60,0.5);*/
top: 50%;
left: 50%;
margin-top: -35px;
margin-left: -38px;
z-index: 3;
opacity: 1;
-webkit-animation: haloo 2s infinite linear;
-moz-animation: haloo 2s infinite linear;
animation: haloo 2s infinite linear;
}
@-webkit-keyframes halo {
0% {
opacity: 0;
-webkit-transform: scale(0.1,0.1);
}
100% {
opacity: 1;
box-shadow: 0 0 1px 4px rgba(69, 222, 60,1);
-webkit-transform: scale(1,1);
}
}
@keyframes halo {
0% {
opacity: 0;
transform: scale(0.1,0.1);
}
100% {
opacity: 1;
box-shadow: 0 0 1px 4px rgba(69, 222, 60,1);
transform: scale(1,1);
}
}
@-webkit-keyframes haloo {
0% {
opacity: 1;
box-shadow: 0 0 1px 4px rgba(69, 222, 60,1);
-webkit-transform: scale(1,1);
}
100% {
opacity: 0;
box-shadow: 0 0 1px 2px rgba(69, 222, 60,0.2);
-webkit-transform: scale(1.4,1.4);
}
}
@keyframes haloo {
0% {
opacity: 1;
box-shadow: 0 0 1px 4px rgba(69, 222, 60,1);
transform: scale(1,1);
}
100% {
opacity: 0;
box-shadow: 0 0 1px 2px rgba(69, 222, 60,0.2);
transform: scale(1.4,1.4);
}
}
自己写的光圈动画
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。