svg+css实现wifi信号图标动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+css实现wifi信号图标动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --speed: 2s; } body { background: #222; color: #7fc; margin: 0; height: 100vh; display: grid; place-items: center; } svg { display: block; width: 90vmin; height: 90vmin; } circle, .waves path { animation: blink linear var(--speed) infinite; } circle, .waves path:nth-child(5n) { animation-delay: calc(-0.8 * var(--speed)); } .waves path:nth-child(5n + 1) { animation-delay: calc(-0.6 * var(--speed)); } .waves path:nth-child(5n + 2) { animation-delay: calc(-0.4 * var(--speed)); } .waves path:nth-child(5n + 3) { animation-delay: calc(-0.2 * var(--speed)); } .waves path:nth-child(5n + 4) { animation-delay: 0; } @keyframes blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } } </style> </head>.........完整代码请登录后点击上方下载按钮下载查看
网友评论0