div+css实现引力吸引碎片动画按钮效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现引力吸引碎片动画按钮效果代码。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Orbitron&display=swap" rel="stylesheet"> <style> @charset "UTF-8"; @property --k { syntax: "<number>"; initial-value: -1; inherits: true; } html, body { display: grid; } html { height: 100%; } body { place-content: center; } button { --m: 1; grid-area: 2/1/span 1/span 2; position: relative; margin: 1em; border: solid 2em transparent; padding: 1.5em 3.25em; border-radius: 5em; box-shadow: inset 0 0 1px #23429e; background: radial-gradient(#111a39, 67.5%, #3476da) padding-box, radial-gradient(#a0c2ed, 35%, #a0c2ed00 70%) 50% 0/80% 50% repeat-y; color: #f2fdfe; font: 700 1.5em/1 montserrat, sans-serif; } #slow:checked ~ button { --m: 5 ; } @keyframes k { 0%, 33.3% { --k: 1 ; } } .particle { --f: 1; --pos-k: max(0, var(--k)); --neg-k: max(0, -1*var(--k)); --low-c: min(1, 4*(1 - var(--pos-k))); --abs-d: max(var(--neg-k) - .5, .5 - var(--neg-k)); --mov-f: var(--pos-k); display: grid; position: absolute; left: var(--x); top: var(--y); rotate: var(--a); animation: k calc(var(--m)*1s) linear calc(var(--m)*var(--t, 0)*1s) infinite; } @supports (scale: sqrt(4)) { .particle { --mov-f: sqrt(var(--pos-k)) ; } } .particle::before, .particle::after { grid-area: 1/1; width: 0.75em; aspect-ratio: 1; } .particle::before { --sa: calc(min(1, 1 - 2*min(.5, var(--mov-f)))*45deg); border-radius: calc(1.25*min(.8, var(--mov-f))*50%) 50% 50%; transform-origin: 0 0; translate: calc(var(--mov-f)*var(--d)); rotate: -45deg; scale: var(--f); transform: skew(var(--sa), var(--sa)); opacity: var(--low-c); filter: Saturate(var(--low-c)); background: radial-gradient(at 85% 85%, #bad9fa, #3e66a4 75%); content: ""; } .particle::after { trans.........完整代码请登录后点击上方下载按钮下载查看
网友评论0