Sfera CSS Faux-3D /w Texture

1559 zegarkidawida

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

16 October 2025

Animazione di caricamento CSS con effetti frammento

10 July 2025

Esempio HTML della schermata di caricamento animata CSS

11 August 2025

Raccolta di animazioni circolari CSS

HTML

<div class="utilities">
  <div class="control">
    <label for="bands">bands</label>
    <input type="range" id="bands" min="2" max="200" value="80">
  </div>
  <div class="control">
    <label for="cells">cells</label>
    <input type="range" id="cells" min="3" max="120" value="40">
  </div>
  <div class="control">
    <label for="size"> size</label>
    <input type="range" id="size" min="5" max="120" value="70">
  </div>
  <div class="control">
    <label for="speed">speed</label>
    <input type="range" id="speed" min="1" max="20" value="15">
  </div>
  <fieldset id="image" class="control">
    <legend>texture</legend>
    <label>
      <input type="radio" checked name="image" value="url(https://assets.codepen.io/25387/Gall_Stereographic_projection_SW_centered.jpg)">
      <div class="image-wrapper">
        <img src="https://assets.codepen.io/25387/Gall_Stereographic_projection_SW_centered.jpg" alt="world map">
        <a href="https://en.wikipedia.org/wiki/Gall_stereographic_projection" target="_blank" title="source">↗</a>
      </div>
    </label>
    <label>
      <input type="radio" name="image" value="url(https://assets.codepen.io/25387/convergence-screenshot.jpg)">
      <div class="image-wrapper">
      <img src="https://assets.codepen.io/25387/convergence-screenshot.jpg" alt="convergence">
        <a href="https://codepen.io/pavlovsk/pen/zYXBEeR" target="_blank" title="source">↗</a>
      </div>
    </label>
    <label>
      <input type="radio" name="image" value="url(https://assets.codepen.io/25387/smiley.png)">
      <div class="image-wrapper">
      <img src="https://assets.codepen.io/25387/smiley.png" alt="convergence">
        <a href="https://www.google.com/search?q=smiley+face+sphere+texture&tbs=imgo:1&udm=2#vhid=B2Ahxik8MU8_1M&vssid=mosaic" target="_blank" title="source">↗</a>
      </div>
    </label>
  </fieldset>
  <div class="control">
    <label for="with-border">borders</label>
    <input type="checkbox" id="with-border">
  </div>
</div>

CSS

@layer cosmetics, utilities, demo;

@layer demo {
  body {
    height: 100dvh;
    display: grid;
    place-content: center;
  }

.world {
    --bands: 130;
    --cells: 60;
    --_size: 80;
    --size: calc(var(--_size) * 1dvmin);
    --_speed: 15;
    --speed: calc((20.5 - var(--_speed)) * 1s);
    --image: url(https://assets.codepen.io/25387/Gall_Stereographic_projection_SW_centered.jpg);
    display: flex;
    align-items: center;
    flex-direction: column;
    clip-path: circle();
  }

.band {
    --latitude: calc(sin(PI / var(--bands) * var(--i)) * 1.2);
    --width: calc(var(--size) * var(--latitude));
    width: var(--width);
    height: calc(var(--size) / var(--bands) * var(--latitude));
    display: flex;
    justify-content: center;
  }

.cell {
    --longitude: calc(sin(PI / var(--cells) * var(--j)) * 1.2);
    --bg-width: calc(var(--width) * var(--longitude) * 1.25);
    --bg-height: calc(var(--size) * 0.9);
    height: calc(var(--size) * var(--longitude));
    width: calc(var(--width) / var(--cells) * var(--longitude));
    background:
      var(--image) 50% fixed;
    background-size:
      var(--bg-width)
      var(--bg-height);
    animation: spin var(--speed) linear infinite;
  }
  
  .with-borders .cell {
    box-shadow: 0 0 0 1px chartreuse;
  }

@keyframes spin {
    100% {
      background-position-x: calc(50% + var(--bg-width));
    }
  }
}

@layer cosmetics {
  body {
    overflow: hidden;
    margin: 0;
    background: cornsilk;
  }

.world::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: cornsilk;
    opacity: .5;
    mix-blend-mode: color;
  }
}

@layer utilities {
  .utilities {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    padding: 1em;
  }

.utilities .control {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 24px;
    gap: .5em;
    font-size: 1.1em;
    font-family: monospace;
    font-variant: small-caps;
    letter-spacing: .05em;
  }

.utilities #image:has(:focus) {
    border: 2px solid royalblue;
  }

.utilities #image input {
    position: absolute;
    top: -100dvh;
    left: -100dvw;
    opacity: 0;
  }

.utilities .image-wrapper {
    --color-1: #ddd;
    --color-2: royalblue;
    position: relative;
    width: max(10dvmin, 48px);
    height: max(10dvmin, 48px);
    color: var(--color-1);
  }

.utilities .image-wrapper a {
    display: none;
    position: absolute;
    bottom: 0;
    right: 0;
    translate: 30% 30%;
    width: 30%;
    height: 30%;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    text-decoration: none;
    background: var(--color-1);
    color: var(--color-2);
    border-radius: 50%;
  }

.utilities .image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: .5dvmin solid var(--color-1);
  }

.utilities #image :checked + .image-wrapper {
    --color-1: royalblue;
    --color-2: #ddd;
  }

.utilities #image :checked + .image-wrapper a {
    display: inline-flex;
  }
}

JS

/*
 * JS just handles the playground of parameters
 * and inserts the repeated markup.
 */
const UI = {
  bands: document.querySelector('#bands'),
  cells: document.querySelector('#cells'),
  size: document.querySelector('#size'),
  speed: document.querySelector('#speed'),
  image: document.querySelectorAll('#image input'),
  borders: document.querySelector('#with-border'),
  world: document.querySelector('.world')
}

const state = {
  bands: +UI.bands.value,
  cells: +UI.cells.value,
  size: +UI.size.value,
  speed: +UI.speed.value,
  image: UI.image[0].value,
  borders: UI.borders.checked
}

UI.bands.addEventListener('input', (e) => {
  state.bands = +e.target.value
  render()
})

UI.cells.addEventListener('input', (e) => {
  state.cells = +e.target.value
  render()
})

UI.size.addEventListener('input', (e) => {
  state.size = +e.target.value
  render()
})

UI.speed.addEventListener('input', (e) => {
  state.speed = +e.target.value
  render()
})

Array.from(UI.image).forEach(input => {
  input.addEventListener('change', () => {
    state.image = input.value
    render()
  })
})

UI.borders.addEventListener('input', (e) => {
  state.borders = e.target.checked
  render()
})

render()

function render() {
  UI.world.style.setProperty('--bands', state.bands)
  UI.world.style.setProperty('--cells', state.cells)
  UI.world.style.setProperty('--_size', state.size)
  UI.world.style.setProperty('--_speed', state.speed)
  UI.world.style.setProperty('--image', state.image)
  UI.world.classList.toggle('with-borders', state.borders)
  UI.world.innerHTML = chunk(state.bands, i => `
    <div class="band" style="--i: ${i}">
      ${chunk(state.cells, j => `
        <div class="cell" style="--j: ${j}"></div>
      `)}
    </div>
  `)
}

function chunk(howMany, mapFn) {
  return Array
    .from({ length: howMany }, (_, i) => mapFn(i))
    .join('')
}

Consigliato

Animazione di caricamento CSS con effetti frammento

Esempio HTML della schermata di caricamento animata CSS

Raccolta di animazioni circolari CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS