svg+css实现彩色线条旋转魔术动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+css实现彩色线条旋转魔术动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: black; padding: 0; margin: 0; } div { position: absolute; top: 0px; bottom: 0; left: 0px; right: 0px; width: 300px; height: 300px; margin: auto; } .g-spin circle { transform-origin: 120px 120px; transform: rotate(0); } .g-spin circle { animation: rotation 4s infinite alternate; } .g-spin circle:nth-child(2) { animation-delay: 0.5s; } .g-spin circle:nth-child(3) { animation-delay: 0.75s; } .g-spin circle:nth-child(4) { animation-delay: 1s; } .g-spin circle:nth-child(5) { animation-delay: 1.25s; } .g-spin circle:nth-child(6) { animation-delay: 1.5s; } .g-spin circle:nth-child(7) { animation-delay: 1.75s; } .g-spin circle:nth-child(8) { animation-delay: 2s; } .g-spin circle:nth-child(9) { animation-delay: 2.25s; } .g-spin circle:nth-child(10) { animation-delay: 2.5s; } .g-spin circle:nth-child(11) { animation-delay: 2.75s; } .g-spin circle:nth-child(12) { animation-delay: 3s; } .g-spin circle:nth-child(13) { animation-delay: 3.25s; } .g-spin circle:nth-child(14) { animation-delay: 3.5s; } .g-spin circle:nth-child(15) { animation-delay: 3.75s; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style> </head> <body translate="no"> <div> <svg width="300" height="300" viewbox="0 0 240 240"> <g class="g-spin" stroke-width="10" stroke-das.........完整代码请登录后点击上方下载按钮下载查看
网友评论0