css实现圆圈放大涟漪麦克风录音聆听中动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现圆圈放大涟漪麦克风录音聆听中动画效果代码
代码标签: css 圆圈 放大 涟漪 麦克风 录音 聆听 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto");
@keyframes circle {
50% {
transform: scale(1.1);
}
75% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
@keyframes outer-circle {
0% {
border-color: transparent;
}
25% {
border-color: transparent;
}
75% {
transform: scale(1.2);
border: 1vmin solid #36c1fa;
}
100% {
transform: scale(1.7);
border: 1vmin solid #36c1fa;
border-color: transparent;
}
}
@keyframes outer-circle-2 {
0% {
transform: scale(1.3);
border: 1vmin solid #36c1fa;
}
50% {
transform: scale(1.7);
border-color: transparent;
}
75% {
border-color: transparent;
}
100% {
border-color: transparent;
}
}
@keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba(91, 193, 255, 0.3), 0 0 0 0vmin rgba(91, 193, 255, 0.3), 0 0 0 0vmin rgba(91, 193, 255, 0.3), 0 0 0 20vmin rgba(91, 193, 255, 0.3);
}
25% {
box-shadow: 0 0 0 0 rgba(91, 193, 255, 0.3), 0 0 0 0vmin rgba(91, 193, 255, 0.3), 0 0 0 15vmin rgba(91, 193, 255, 0.3), 0 0 0 20vmin rgba(91, 193, 255, 0.3);
}
50% {
box-shadow: 0 0 0 0 rgba(91, 193, 255, 0.3), 0 0 0 10vmin rgba(91, 193, 255, 0.3), 0 0 0 15vmin rgba(91, 193, 255, 0.3), 0 0 0 20vmin rgb.........完整代码请登录后点击上方下载按钮下载查看
网友评论0