div+scss实现三维彩球由点汇聚成球动画效果代码
代码语言:html
所属分类:动画
代码描述:div+scss实现三维彩球由点汇聚成球动画效果代码
代码标签: div scss 三维 彩球 点 汇聚 球 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style type = 'text/scss'> // global stuff * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #000; overflow: hidden; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.5rem; &:hover .scene { scale: 1.2; } } @mixin visually-hidden() { position: absolute; width: 1px; height: 1px; overflow: hidden; left: -10000px; } @mixin centered() { display: flex; justify-content: center; align-items: center; } // scene .scene { perspective: 30rem; transition: perspective 2s ease-in-out, scale 300ms ease; --rotationXstart: -30deg; --rotationXend: -30deg; position: absolute; left: 50%; top: 50%; * { position: absolute; transform-style: preserve-3d; } --radius: min(10rem, 35vw); } // sphere .sphere { @include centered(); animation: rotate-around 20s linear infinite; @keyframes rotate-around { 0% { transform: rotateX(var(--rotationXstart)) rotateY(0deg); } 100% { transform: rotateX(var(--rotationXend)) rotateY(360deg); } } } // points $number: 10; // number of latitudes $turn: 360deg; .point { --size: calc(0.15 * var(--radius)); width: var(--size); aspect-ratio: 1; border-radius: 50%; --alpha: 0deg; --beta: 0deg; --hue: 0deg; background-color: hsl(var(--hue), 100%, 50%); animation: intro 5s ease-in-out forwards; @keyframes intro { 0% { transform: rotateX(calc(var(--alpha) * 0)) rotateY(calc(var(--beta) * 0)) translateZ(var(--radius)); } 50% { transform: rotateX(calc(var(--alpha) * 0)) rotateY(calc(var(--beta) * 1)) translateZ(var(--radius)); } 100% { transform: rotateX(calc(var(--alpha) * 1)) rotateY(calc(var(--beta) * 1)) translateZ(var(--radius)); } } @for $i from 0 to $number { @for $j from 0 through $number { $index: $i * ($number + 1) + $j + 1; $alpha: $i * $turn / $number; $beta: $j * 0.5 * $turn / $number - 0.25 * $turn; $hue: $j * $turn / ($number + 1); &:nth-child(#{$index}) { @if (($j == 0 or $j == $number) and $i > 0) { display: none; } @else { --alpha: #{$alpha}; --beta: #{$beta}; --hue: #{$j * $turn / ($number + 1)}; } } } } } // controls label { background-color: #555; color: #fff; padding: 0.5rem 1rem; cursor: pointer; z-index: 10; font-size: 1.125rem; border-radius: 0.25rem; user-select: none; opacity: 0.2; transition: opacity 200ms ease, background-color 200ms ease; &:hover { opacity: 1; } } input[type="checkbox"] { @include visually-hidden(); &:checked + label { background-color: #e63; } &:focus-visible + label { outline: 2px solid #fff; opacity: 1; } &#inside:checked ~ .scene { perspective: var(--radius); } &#rotateX:checked ~ .scene { --rotationXend: 330deg; } &#clouds:checked ~ .scene .point { box-shadow: 0 0 calc(2.5 * var(--size)) #fff; } } </style> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/sass.sync.js"></script> <script> const styleEls = document.querySelectorAll('style'); styleEls.forEach(styleEl => { const type = styleEl.getAttribute('type'); if (type == 'text/scss') { Sass.compile(styleEl.innerHTML, function(result) { if (result.status == 0) { const newStyleEl = document.createElement('style'); newStyleEl.textContent = result.text document.head.appendChild(newStyleEl); } }) } }); </script> </head> <body> <input type="checkbox" id="inside" /> <label for="inside">Go inside</label> <input type="checkbox" id="rotateX" /> <label for="rotateX">Rotate X</label> <input type="checkbox" id="clouds" /> <label for="clouds">Show clouds</label> <div class="scene"> <div class="sphere"> <div class="point"></div> <div class="point"></div> <div class="point"></div> <div class="point"></div> <div class="point"></div> <div class="point"></div> <div class="point"></div> <div class="point"></div> <div class="point"></div> <div class="point.........完整代码请登录后点击上方下载按钮下载查看
网友评论0