js+svg实现网飞版三体中倒计时动画效果代码
代码语言:html
所属分类:动画
代码描述:js+svg实现网飞版三体中倒计时动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --transition-animation-duration: 0.25s; --bg-x: -25%; --bg-y: -25%; } html, body { height: 100%; background: #030507; display: flex; flex-direction: row; place-items: center; place-content: center; } templates { display: none; } .flex { display: flex; flex-direction: row; place-items: center; place-content: center; } .countdown { width: 500px; max-width: 90vw; } .digit, .divider { display: flex; margin: 0 -10px; } .digit svg, .divider svg { width: 100%; } .digit svg path:last-of-type, .divider svg path:last-of-type { transform: scaleY(2.5) scaleX(0.4) !important; filter: blur(20px) !important; } .digit { transition: var(--transition-animation-duration) cubic-bezier(0, 0, 0, 0.97); } .digit.animate-transition { transform: scale(1.1); mix-blend-mode: plus-lighter; filter: brightness(1.5) drop-shadow(2px 2px 14px #d1450e); } .digit.animate-transition path { stroke: rgba(255, 106, 40, 0.95) !important; } .bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url("//repo.bfw.wiki/bfwrepo/image/660f2b8d124d4.png"); background-size: cover; background-position: center; opacity: 0.1; transform: translateX(var(--bg-x)) translateY(var(--bg-y)) scale(1.5); animation: blink 1s ease-out infinite alternate; } .shadow { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: radial-gradient(ellipse, transparent 50%, #000); } @keyframes blink { 0% { opacity: 0.1; } 50% { opacity: 0.1; } 90% { opacity: 0.2; } 100% { opacity: 0.1; } } .credits { position: absolute; font-family: sans-serif; bottom: 36px; left: 50%; transform: translateX(-50%); color: #df6c1e; text-shadow: 0 0px 8px #ca3c05; font-size: 0.9rem; } .credits:not(:hover) { opacity: 0.4; } .credits a { color: #df6c1e; } </style> </head> <body translate="no"> <templates> <svg id="number-0" width="180" height="248" viewBox="0 0 180 248" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M79 14 C62 24 28 49 27 58 C25 70 24 103 18 126 C13 149 24 196 38 212 C52 228 71 222 79 226 C87 231 112 231 118 226 C124 222 145 204 149 204 C154 204 157 162 153 144 C149 126 169 103 159 73 C149 43 132 21 112 20" stroke="#FD7427" stroke-width="1.06167" /> </svg> <svg id="number-1" width="180" height="248" viewBox="0 0 180 248" fill="none" xmlns="http://wwww3org/2000/svg"> <path d="M41 71 C47 61 61 42 69 42 C79 42 108 2 109 12 C109 21 109 70 109 82 C109 94 106 156 105 168 C104 178 107 214 109 231" stroke="#FD7427" stroke-width="1" /> </svg> <svg id="number-2" width="180" height="248" viewBox="0 0 180 248" fill="none" xmlns="http://wwww3org/2000/svg"> <path d="M36 76 C35 66 38 45 51 35 C67 22 92 9 104 14 C116 19 152 57 153 76 C153 95 91 135 86 148 C80 161 38 208 32 217 C26 225 75 217 86 217 C94 217 134 220 153 222" stroke="#FD7427" stroke-width="1" /> </svg> <svg id="number-3" width="180" height="248" viewBox="0 0 180 248" fill="none" xmlns="http://wwww3org/2000/svg"> <path d="M38 69 C44 51 63 14 93 14 C122 13 149 50 159 69 L116 113 L68 122 C91 123 140 127 150 143 C162 163 167 166 165 186 C164 205 111 234 102 234 C93 234 39 226 20 196" stroke="#FD7427" stroke-width="1" /> </svg> <svg id="number-4" width="180" height="248" viewBox="0 0 180 248" fill="none" xmlns="http://wwww3org/2000/svg"> <path d="M129 230 V19 C95 61 25 150 22 168 C19 191 86 176 98 176 C107 176 148 176 167 176" stroke="#FD7427" stroke-width="1" /> </svg> <svg id="number-5" width="180" height="248" viewBox="0 0 180 248" fill="none" xmlns="http://wwww3org/2000/svg"> <path d="M151 21 H48 C44 49 37 115 38 121 C39 128 85 102 105 102 C125 102 158 142 158 161 C157 179 135 221 99 222 C62 224 29 194 25 177" stroke="#FD7427" stroke-width="1" /> </svg> <svg id="number-6" width="180" height="248" viewBox="0 0 180 248" fill="none" xmlns="http://wwww3org/2000/svg"> <path d="M159 70 C144 51 111 14 94 14 C73 14 29 64 27 80 C25 97 18 188 33 203 C48 218 87 233 94 233 C101 233 152 207 154 186 C155 165 151 121 139 113 C128 104 92 93 81 93 C72 93 35 129 18 147" stroke="#FD7427" stroke-width="1" /> </svg> <svg id="number-7" width="180" height="248" viewBox="0 0 180 248" fill="none".........完整代码请登录后点击上方下载按钮下载查看
网友评论0