自己写的光圈动画
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自己写的光圈动画相关的知识，希望对你有一定的参考价值。
.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);
}
}
以上是关于自己写的光圈动画的主要内容，如果未能解决你的问题，请参考以下文章
自己定义View时，用到Paint Canvas的一些温故，简单的帧动画（动画一 ，"掏粪男孩Gif"顺便再提提onWindowFocusChanged）(代码片段