css实现点击碎纸削礼花喷射动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现点击碎纸削礼花喷射动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { font-family: system-ui; margin: 0; min-block-size: 100vh; display: grid; place-content: center; background-color: #100722; overflow: hidden; perspective: 1000px; --preloadDuration: 0s; -webkit-animation: preloadAnimation 1ms 10s forwards; animation: preloadAnimation 1ms 10s forwards; } @-webkit-keyframes preloadAnimation { to { --preloadDuration: unset; } } @keyframes preloadAnimation { to { --preloadDuration: unset; } } .party { position: relative; font-size: 2rem; color: white; background-color: #6930f8; background-image: radial-gradient(#975df4, transparent 75%); background-repeat: no-repeat; background-position: 0 100px; padding: 1rem 2rem; border: 0; border-radius: 100vw; cursor: pointer; transition: background-position 200ms; transform-style: preserve-3d; } .party:hover, .party:focus { background-position: 0 35px; } .confetti { position: absolute; inset: 50%; transform-style: preserve-3d; opacity: 0; } .confetti > span { position: absolute; width: 25px; aspect-ratio: 1; background-color: hsl(var(--hue), 100%, 50%); border-radius: var(--shape); width: max(5px, var(--confetti-size)); } .confetti > span:nth-child(1) { --shape: -47.5117859241vw; --confetti-size: 8px; --hue: 134; --offsetY: 7.5vh; --offsetX: -12vw; --offsetZ: 8px; --spin: 5turn; } .confetti > span:nth-child(2) { --shape: 16.3798350804vw; --confetti-size: 8px; --hue: -4; --offsetY: 15.5vh; --offsetX: -40vw; --offsetZ: 125px; --spin: 6turn; } .confetti > span:nth-child(3) { --shape: -38.3305327697vw; --confetti-size: 12px; --hue: 80; --offsetY: -12.5vh; --offsetX: 5vw; --offsetZ: -80px; --spin: 2turn; } .confetti > span:nth-child(4) { --shape: -35.6396462154vw; --confetti-size: 12px; --hue: 2; --offsetY: 9.5vh; --offsetX: -34vw; --offsetZ: -196px; --spin: 5turn; } .confetti > span:nth-child(5) { --shape: -17.9618381513vw; --confetti-size: 5px; --hue: -160; --offsetY: -2.5vh; --offsetX: -32vw; --offsetZ: 57px; --spin: 8turn; } .confetti > span:nth-child(6) { --shape: 9.5846307919vw; --confetti-size: 7px; --hue: 51; --offsetY: -11.5vh; --offsetX: -26vw; --offsetZ: -244px; --spin: 3turn; } .confetti > span:nth-child(7) { --shape: -22.6068256357vw; --confetti-size: 5px; --hue: -34; --offsetY: -2.5vh; --offsetX: 10vw; --offsetZ: -189px; --spin: 8turn; } .confetti > span:nth-child(8) { --shape: -34.6159242229vw; --confetti-size: 5px; --hue: -14; --offsetY: -16.5vh; --offsetX: -11vw; --offsetZ: 137px; --spin: 10turn; } .confetti > span:nth-child(9) { --shape: -42.0716306665vw; --confetti-size: 16px; --hue: -108; --offsetY: -1.5vh; --offsetX: 32vw; --offsetZ: -197px; --spin: 7turn; } .confetti > span:nth-child(10) { --shape: -41.8539787275vw; --confetti-size: 10px; --hue: -21; --offsetY: 8.5vh; --offsetX: 19vw; --offsetZ: -61px; --spin: 4turn; } .confetti > span:nth-child(11) { --shape: -38.3333973078vw; --confetti-size: 2px; --hue: 163; --offsetY: -4.5vh; --offsetX: -37vw; --offsetZ: -212px; --spin: 8turn; } .confetti > span:nth-child(12) { --shape: -15.4293500096vw; --confetti-size: 2px; --hue: -116; --offsetY: -5.5vh; --offsetX: 21vw; --offsetZ: 239px; --spin: 9turn; } .confetti > span:nth-child(13) { --shape: -47.0648917741vw; --confetti-size: 1px; --hue: 149; --offsetY: -12.5vh; --offsetX: 19vw; --offsetZ: -46px; --spin: 2turn; } .confetti > span:nth-child(14) { --shape: 7.8463444688vw; --confetti-size: 6px; --hue: -124; --offsetY: 5.5vh; --offsetX: -23vw; --offsetZ: -136px; --spin: 10turn; } .confetti > span:nth-child(15) { --shape: -40.9566880533vw; --confetti-size: 5px; --hue: 0; --offsetY: 16.5vh; --offsetX: 16vw; --offsetZ: -173px; --spin: 6turn; } .confetti > span:nth-child(16) { --shape: -45.4202101195vw; --confetti-size: 16px; --hue: -54; --offsetY: -16.5vh; --offsetX: 27vw; --offsetZ: 168px; --spin: 5turn; } .confetti > span:nth-child(17) { --shape: 37.8269063097vw; --confetti-size: 20px; --hue: 69; --offsetY: 6.5vh; --offsetX: 39vw; --offsetZ: -77px; --spin: 4turn; } .confetti > span:nth-child(18) { --shape: -40.7728221424vw; --confetti-size: 2px; --hue: 147; --offsetY: -17.5vh; --offsetX: 17vw; --offsetZ: -244px; --spin: 6turn; } .confetti > span:nth-child(19) { --shape: -32.0021770434vw; --confetti-size: 2px; --hue: -39; --offsetY: -3.5vh; --offsetX: 28vw; --offsetZ: 151px; --spin: 3turn; } .confetti > span:nth-child(20) { --shape: -40.6485995011vw; --confetti-size: 9px; --hue: -11; --offsetY: -2.5vh; --offsetX: 35vw; --offsetZ: 139px; --spin: 1turn; } .confetti > span:nth-child(21) { --shape: 40.0410006679vw; --confetti-size: 3px; --hue: -62; --offsetY: 3.5vh; --offsetX: -20vw; --offsetZ: 91px; --spin: 6turn; } .confetti > span:nth-child(22) { --shape: -17.2269486335vw; --confetti-size: 9px; --hue: 163; --offsetY: 8.5vh; --offsetX: 8vw; --offsetZ: 127px; --spin: 5turn; } .confetti > span:nth-child(23) { --shape: 0.7118443156vw; --confetti-size: 11px; --hue: -29; --offsetY: 9.5vh; --offsetX: -23vw; --offsetZ: -19px; --spin: 4turn; } .confetti > span:nth-child(24) { --shape: 2.6455871057vw; --confetti-size: 1px; --hue: -1; --offsetY: 6.5vh; --offsetX: -16vw; --offsetZ: -114px; --spin: 4turn; } .confetti > span:nth-child(25) { --shape: -18.7963876245vw; --confetti-size: 16px; --hue: 23; --offsetY: 0.5vh; --offsetX: -19vw; --offsetZ: -14px; --spin: 3turn; } .confetti > span:nth-child(26) { --shape: 12.0718236453vw; --confetti-size: 17px; --hue: 46; --offsetY: -10.5vh; --offsetX: 37vw; --offsetZ: -227px; --spin: 1turn; } .confetti > span:nth-child(27) { --shape: 31.4552912172vw; --confetti-size: 11px; --hue: 46; --offsetY: -13.5vh; --offsetX: -39vw; --offsetZ: -164px; --spin: 8turn; } .confetti > span:nth-child(28) { --shape: -21.233021789vw; --confetti-size: 8px; --hue: 59; --offsetY: -6.5vh; --offsetX: 32vw; --offsetZ: -170px; --spin: 10turn; } .confetti > span:nth-child(29) { --shape: 8.9943015394vw; --confetti-size: 18px; --hue: 178; --offsetY: 2.5vh; --offsetX: -34vw; --offsetZ: -191px; --spin: 2turn; } .confetti > span:nth-child(30) { --shape: 17.9610381502vw; --confetti-size: 6px; --hue: -152; --offsetY: -7.5vh; --offsetX: -25vw; --offsetZ: -3px; --spin: 3turn; } .confetti > span:nth-child(31) { --shape: 4.9502054632vw; --confetti-size: 14px; --hue: 89; --offsetY: 10.5vh; --offsetX: -14vw; --offsetZ: 187px; --spin: 9turn; } .confetti > span:nth-child(32) {.........完整代码请登录后点击上方下载按钮下载查看
网友评论0