纯css实现三维3d五角星月亮效果代码
代码语言:html
所属分类:三维
代码描述:纯css实现三维3d五角星月亮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; @property --houdini { syntax: "<integer>"; initial-value: 1; inherits: true; } html { height: 100%; background: #000014; } html:before, html:after { position: absolute; z-index: -1; width: 100%; opacity: 0.05; color: #fff; font: italic 900 4vmin/2 petit formal script; text-align: center; } html:after { content: "Missing you every day"; } html:before { content: "1st of June 1927 - 18th of January 2019"; } body, div { display: grid; } body { --s: var(--houdini, 0); --not-s: calc(1 - var(--s)); overflow: hidden; margin: 0; min-height: 18.75em; perspective: 39em; } div, ::before, ::after { grid-area: 1/1; place-self: center; } ::before, ::after { --not-k: calc(1 - var(--k)); --sgn-k: calc(2*var(--k) - 1) ; } ::before { --k: 0 ; } ::after { --k: 1 ; } div { transform-style: preserve-3d; } .toy { animation: rot-y 12s linear infinite; } .toy > .hang { transform: rotatey(calc(var(--py)*1turn)) translate(9.375em); } @keyframes rot-y { to { transform: rotatey(1turn); } } .hang { --not-typ: calc(1 - var(--typ)); position: relative; } .hang > .hang { --not-pos: calc(1 - var(--pos, 0)); transform: rotatex(calc(var(--pos)*var(--dl, 0deg))) translate3d(0, calc((1.2 + var(--sf))*var(--not-pos)*6.25em), calc(var(--pos)*-6.25em)) rotatex(calc(-1*var(--pos)*var(--dl, 0deg))) translatey(calc(var(--pos)*var(--sf)*6.25em)); } .hang:before { position: absolute; bottom: 50%; width: 4px; height: 12.5em; background: repeating-linear-gradient(60deg, darkorange 0 4px, maroon 0 8px); animation: rot-y 12s linear infinite reverse; content: ""; } @property --int { syntax: "<integer>"; initial-value: 0; inherits: false; } .⭐ > .lat { --p: calc(var(--i)/var(--n)); --not-up: Min(1, var(--i)); --up: calc(1 - var(--not-up)); --dif: calc(2*var(--i) - var(--n)); --not-dn: Min(1, Max(var(--dif), calc(-1*var(--dif)))); --dn: calc(1 - var(--not-dn)); height: 0; transform: rotatex(calc(var(--p)*1turn)) translatey(calc(-1*var(--sf)*6.25em)); } .⭐ > .lat::before, .⭐ > .lat::after { --sum: calc(var(--p) + var(--sgn-k)*var(--rcm) + 1); --int: calc(var(--sum) - .5); --mod: calc(var(--sum) - var(--int)); --term: calc(var(--s)*var(--mod) + var(--not-s)*var(--p)); --abs: Max(calc(var(--term) - .5), calc(.5 - var.........完整代码请登录后点击上方下载按钮下载查看
网友评论0