<a href="#on" id="on" role="presentation">An animated cartoon of a ceiling fan</a>

body {
  background-image: linear-gradient(#b8c8d8 5vmin, #c8d8e8 0 calc(5vmin + 1px), #d8e8f8);
  display: grid;
  height: 100vh;
  justify-content: center;
  margin: 0;
  overflow: hidden;
  width: 100%;
}

#on {
  background-image:
    radial-gradient(ellipse 23% 4% at 50% 50%,#eee 50%, transparent 0),
    radial-gradient(circle at 50% 100%, white 20%, transparent 0),
    linear-gradient(white 70%, #ccc);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 
    100% 100%,
    50% 50%,
    2.5% 50%;
  display: block;
  font-size: 0;
  height: 60vmin;
  perspective: 1200px;
  width: 60vmin;
}

@keyframes spin {
  to {
    transform: rotate3d(1, 0, 0, -75deg) rotate(390deg);
  }
}

#on::before {
  --color: #b53;
  --color-dark: #a42;
  content: "";
  background-image: 
    linear-gradient(#0000 44%, black 0 56%, #0000 0),
    linear-gradient(to right, #0000 44%, black 0 56%, #0000 0),
    radial-gradient(circle at 50% 23%, black 6%, #0000 0),
    radial-gradient(circle at 50% 77%, black 6%, #0000 0),
    radial-gradient(circle at 23% 50%, black 6%, #0000 0),
    radial-gradient(circle at 77% 50%, black 6%, #0000 0),
    conic-gradient(at 50% 150%, var(--color) 0 8deg, #0000 0 352deg, var(--color-dark) 0, var(--color) 360deg),
    conic-gradient(at 50% -50%, #0000 0 172deg, var(--color-dark) 0, var(--color) 180deg 188deg, #0000 0),
    conic-gradient(at -50% 50%, #0000 0 82deg, var(--color-dark) 0, var(--color) 90deg 98deg, #0000 0),
    conic-gradient(at 150% 50%, #0000 0 262deg, var(--color-dark) 0, var(--color) 270deg 278deg, #0000 0),
    radial-gradient(black 20%, #0000 0);
  background-position: center center, center center, center center,  center center,  center center,  center center, 50% 0%, 50% 100%, 100% 50%, 0% 50%, center center;
  background-repeat: no-repeat;
  background-size: 25% 25%, 25% 25%, 42% 42%, 42% 42%, 42% 42%, 42% 42%, 42% 42%, 42% 42%, 42% 42%, 42% 42%, 42% 42%;
  border-radius: 50%;
  display: block;
  height: 120%;
  left: -10%;
  position: absolute;
  top: -9%;
  transform: rotate3d(1, 0, 0, -75deg) rotate(30deg);
  width: 120%;
}

#on:target::before {
  animation: spin 5s linear infinite;
}

#on:active::before {
  animation-play-state: paused;
}

#on::after {
  --color: #ffe;
  content: "";
  background-image: 
    radial-gradient(ellipse 300% 155% at 50% 0%, var(--color) 20%, #0000 0),
    radial-gradient(circle at 32.25% 90%, #000 2.25%, #0000 0),
    linear-gradient(to right, #0000 31.5%, #666 0 33%, #0000 0);
  background-repeat: no-repeat;
  background-size: 100% 100%, 100% 90%, 100% 90%;
  border-radius: 100% / 30% 30% 50% 50%;
  box-shadow: 
    inset 0 3vmin 1vmin -0.5vmin #0000000a;
  height: 40%;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -1%);
  transition: background-size 0.25s;
  width: 23%;
}

#on:target::after {
  --color: #ffc;
  background-size: 100% 100%, 100% 80%, 100% 80%;
  box-shadow: inset 0 3vmin 1rem -0.5rem #0001;
}

#on:active::after {
  --color: #ffe;
  background-size: 100% 100%, 100% 100%, 100% 100%;
}