css+svg实现绚丽线条圈圈虚线运动背景动画效果代码
代码语言:html
所属分类:背景
代码描述:css+svg实现绚丽线条圈圈虚线运动背景动画效果代码
代码标签: css svg 绚丽 线条 圈圈 虚线 运动 背景 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/fonts/fnTypoPRODancingScriptRegular.css" /> <style> body { background: linear-gradient(#3800e7, #8a15ff); height: 100vh; font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); font-family:'fnTypoPRODancingScriptRegular'; font-weight: 300; overflow: hidden; color: white; text-align: center; } h1 { font-size: 3em; margin-bottom: 0.2em; } h2 { font-size: 2em; } .main { height: 100vh; display: flex; flex-direction: column; flex-wrap: wrap; position: relative; justify-content: center; align-items: center; } .main:before, .main:after { content: ""; display: block; position: absolute; z-index: -3; } .main:before { right: 0; bottom: -19; height: 30em; width: 30em; border-radius: 30em; background: linear-gradient(#3800e7, #8a15ff); align-self: flex-end; -webkit-animation: gradient-fade 8s ease-in-out 3s infinite alternate; animation: gradient-fade 8s ease-in-out 3s infinite alternate; } .main:after { top: 0; left: 30; height: 10em; width: 10em; border-radius: 10em; background: linear-gradient(#3800e7, #8a15ff); -webkit-animation: gradient-fade-alt 6s ease-in-out 3s infinite alternate; animation: gradient-fade-alt 6s ease-in-out 3s infinite alternate; } .main__text-wrapper { position: relative; padding: 2em; } .main__text-wrapper:before, .main__text-wrapper:after { content: ""; display: block; position: absolute; } .main__text-wrapper:before { z-index: -1; top: -3em; right: -3em; width: 13em; height: 13em; opacity: 0.7; border-radius: 13em; background: linear-gradient(#15e0ff, #8a15ff); -webkit-animation: rotation 7s linear infinite; animation: rotation 7s linear infinite; } .main__text-wrapper:after { z-index: -1; bottom: -20em; width: 20em; height: 20em; border-radius: 20em; background: linear-gradient(#d000c5, #8a15ff); -webkit-animation: rotation 7s linear infinite; animation: rotation 7s linear infinite; } .arrow { z-index: 1000; opacity: 0.5; position: absolute; } .arrow--top { top: 0; left: -5em; } .arrow--bottom { bottom: 0; right: 3em; } .circle { transform: translate(50%, -50%) rotate(0deg); transform-origin: center; } .circle--ltblue { height: 20em; width: 20em; border-radius: 20em; background: linear-gradient(#15e0ff, #3800e7); } .backdrop { position: absolute; width: 100vw; height: 100vh; display: block; background-color: pink; } .dotted-circle { position: absolute; top: 0; right: 0; opacity: 0.3; -webkit-animation: rotation 38s linear infinite; animation: rotation 38s linear infinite; } .draw-in { stroke-dasharray: 1000; stroke-dashoffset: 10; -webkit-animation: draw 15s ease-in-out alternate infinite; animation: draw 15s ease-in-out alternate infinite; } @-webkit-keyframes draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } } @keyframes draw { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } } .item-to { -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; transform-origin: bottom; } .bounce-1 { -webkit-animation-name: bounce-1; animation-name: bounce-1; -webkit-animation-timing-function: ease; animation-timing-function: ease; } .bounce-2 { -webkit-animation-name: bounce-2; animation-name: bounce-2; -webkit-animation-timing-function: ease; animation-timing-function: ease; } .bounce-3 { -webkit-animation-name: bounce-3; animation-name: bounce-3; -webkit-animation-timing-function: ease; animation-timing-function: ease; } @-webkit-keyframes bounce-1 { 0% { transform: translateY(0); } 50% { transform: translateY(50px); } 100% { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0