svg+css实现炫酷彩色圈圈背景动画效果代码
代码语言:html
所属分类:背景
代码描述:svg+css实现炫酷彩色圈圈背景动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: #fee440; } svg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; } .links { position: fixed; bottom: 20px; right: 20px; font-size: 18px; font-family: sans-serif; } a { text-decoration: none; color: black; margin-left: 1em; } a:hover { text-decoration: underline; } a img.icon { display: inline-block; height: 1em; margin: 0 0 -0.1em 0.3em; } </style> </head> <body > <!-- - Single file SVG animation - * can be used as CSS backgroud - * total size is less than 2kb! --> <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" viewBox="0 0 100 100"> <defs> <style> @keyframes rotate { 100% { transform: rotate(360deg); } } .out-top { animation: rotate 20s linear infinite; transform-origin: 13px 25px; } .in-top { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0