svg+css实现星爆Starburst背景效果代码
代码语言:html
所属分类:背景
代码描述:svg+css实现星爆Starburst背景效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } body { background: #3db0f7; } svg { display: block; width: 1000px; margin: 0 auto; } </style> </head> <body > <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1000px" height="1000px" viewBox="0 0 1000 1000" xml:space="preserve"> <defs> <radialGradient id="burst" cx="500" cy="500" r="500" gradientUnits="userSpaceOnUse"> <stop offset="0" style="stop-color:#FFF;stop-opacity:0.4" /> <stop offset="1" style="stop-color:#FFF;stop-opacity:0" /> </radialGradient> <style type="text/css"> .star { opacity: 0.75; fill: hsl(50 100% 50%); } .glitter { animation: twinkle 1s ease alternate-reverse infinite; position: relative; transform-origin: 50% 50%; transform-box: fill-box; } .delay-1 { animation-delay: 0.2s; animation-duration: 2s; animation-timing-function: bounce; } .delay-2 { animation-delay: 0.7s; animation-duration: 0.7s; animation-timing-function: bounce; fill: #FFF; } .delay-3 { animation-delay: 1.8s; animation-duration: 1.8s; animation-timing-function: ease-in; fill: #FFF; } .delay-4 { animation-delay: 1s; animation-duration: 0.3s; } .delay-5 { animation-delay: 0.4s; animation-duration: 0.9s; animation-timing-function: ease-out; fill: hsl(190 50% 70%); } .burst { fill: url(#burst); } @keyframes twinkle { from { transform: scale(1); opacity: 1; } to { transform: scale(2); opacity: 0.5; } } </style> </defs> <g class="rays"> <path class="burst" d="M0,400v200l500-100L0,400z" /> <path class="burst" d="M1000,600V400L500,500L1000,600z" /> <path class="burst" d="M1000,290V0L500,500L1000,290z" /> <path class="burst" d="M0,290V0l500,500L0,290z" /> <polygon class="burst" points="445,0 180,0 500,500" /> <polygon class="burst" points="555,0 820,0 500,500" /> <path class="burst" d="M0,710v290l500-500L0,710z" /> <path class="burst" d="M1000,710v290L500,500L1000,710z" /> <polygon class="burst" points="555,1000 820,1000 500,500" /> <polygon class="burst" points="445,1000 180,1000 500,500" /> </g> <g class="stars"> <path class="star glitter delay-1" d="M683,60.........完整代码请登录后点击上方下载按钮下载查看
网友评论0