svg实现一个彩虹圈圈效果代码
代码语言:html
所属分类:布局界面
代码描述:svg实现一个彩虹圈圈效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html,body { height:100%; background: #1c1830; display: flex; flex-direction: column; align-items: center; } .first { height: 750px; width: 800px; } svg { height: 800px; width: 800px; } .first circle { transform-origin: center; transform: rotate(45deg); } .scene circle { transform-origin: center; transform: rotate(-45deg); } * { box-sizing: border-box; } body { font-family: sans-serif; } .scene { width: 800px; height: 800px; margin: 320px 0 320px 0; perspective: 800px; transform: translate(0, -900px); } .cube svg { height: 100%; width: 100%; } .cube { width: 800px; height: 800px; position: relative; transform-style: preserve-3d; transform: translateZ(-400px); } .cube__face { position: absolute; width: 800px; height: 800px; } .cube__face--bottom { transform: rotateX(-90deg) translateZ(400px); } .row { width: 100%; display: flex; flex-direction: row; justify-content: space-evenly; } .column { display: flex; color: white; flex-direction: column; } h1 { font-size: 50px; margin: 0; color: white; font-weight: 400; text-align: center; letter-spacing: 4px; } p { font-size:8px; font-weight: 200; margin: 2px 0; height: 9px; } /* .akari { padding-right: 24px; } */ .spaced { display: flex; justify-content: space-between; } </style> </head> <body> <!-- original here: https://www.moma.org/collection/works/6710 --> <div class="first"> <svg> <defs> <linearGradient id="outerGradient"> <stop stop-color="#84171a" offset="0%"/> <stop stop-color="#d5d0cc" offset="50%"/> <stop stop-color="#224545" offset="100%"/> </linearGradient> <linearGradient id="innerGradient"> <stop stop-color="#c73119" offset="0%"/> <stop stop-color="#d5d0cc" offset="50%"/> <stop stop-color="#3b6f6b" offset="100%"/> </linearGradient> <linearGradient id="innermostGradient"> <stop stop-color="#d27234" offset="0%"/> <stop stop-color="#d5d0cc" offset="50%"/> <stop stop-color="#91a4a0" offset="100%"/> </linearGradient> </defs> <g> <!-- outer 3 circles --> <circle cx="50%" cy="50%" r="280" fill="url(#outerGradient)" /> <circle cx="50%" cy="50%" r="265.7" fill="url(#innerGradient)" /> <circle cx="50%" cy="50%" r="251.4" fill="url(#innermostGradient)" /> <!-- middle white circle --> <circle cx="50%" cy="50%" fill="#e7e8e3" r="237.1"/> <!-- inner 3 circles --> <circle cx="50%" cy="50%" r="222.8" fill="url(#innermostGradient)"/> <circle cx="50%" cy="50%" r="208.5" fill="url(#innerGradient)"/> <circle cx="50%" cy="50%" r="194.2" fill="url(#outerGradient)"/> <!-- &quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0