Passeando pela internet encontrei esse CodePen onde o Shunya Koide criou um Fusca utilizando apenas HTML e CSS.

O problema é que esse Fusca não acende a luz e não se mexe. Como sabemos que concertar um Fusca é bastante simples, decidi utilizar CSS para fazê-lo andar.

O Fusca

Abaixo você pode ver como está o Fusca. Não tem muita emoção, pois ele está desligado e parado, mas isso é o que vamos mudar.

Acendendo as luzes

O primeiro passo para ligarmos o Fusca é acender as luzes. O que é uma tarefa simples para a maioria dos carros, pode não ser tão trivial para um Fusca.

Para isso, vamos utilizar uma mistura das propriedades CSS box-shadow e background. Primeiro encontramos quais seletores CSS descrevem os faróis do carro, que são .base .whole .bug .bug__headlight e .base .whole .bug .bug__taillight.

Podemos adicionar então uma nova classe a eles, com a nossa iluminação:

.base .whole .bug .bug__headlight.lights-on,
.base .whole .bug .bug__taillight.lights-on {
  box-shadow: 0px 0px 75px 18px rgb(255,255,0);
}

.base .whole .bug .bug__headlight.lights-on {
  background: rgb(200,200,0);
}

Desta forma, temos um Fusca já iluminado:

Girando as rodas

Ok, agora que já temos as luzes acesas, precisamos nos preocupar em fazer o carro andar. Vamos primeiro ativar as rodas dele, que podem ser encontrados com o seletor bug__tire.

Para fazermos as rodas girar, vamos utilizar o animation, com um transform. Veja abaixo como podemos fazer isso:

.base .whole .bug .bug__tire.turn-wheels {
  animation: spin 4s linear infinite;
}

@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } }

Pronto! Desta forma já temos as rodas girando.

Movendo o carro

Agora só precisamos fazer o carro de fato mover.

Começamos essa etapa criando variáveis CSS para calcular os cantos direto e esquero da tela. O Fusca já tem uma variável para sua largura, o que facilita nosso trabalho:

:root {
  --size: 60;
  --unit: calc((var(--size) / 800) * 1vmin);
  --left: calc(100vw / 2 * -1 - calc(800 * var(--unit)) / 2);
  --right: calc(100vw - calc(800 * var(--unit)) / 2 + 120px);
}

Sim, o CSS permite você criar variáveis e fazer cálculos (por incrível que pareça). Com as variáveis --left e --right criadas, podemos utilizá-las na animação de nosso Fusca, iniciando-o na direita e movendo para a esquerda.

.base .whole .bug.move {
  margin-top: 50px;
  transform: translateX(var(--right));
  animation: drive 10s linear infinite;
}

@keyframes drive { 100% { transform: translateX(var(--left)); }}

Conclusão

E pronto, temos um Fusca em pleno funcionamento. Essa é só uma brincadeira utilizando um Codepen encontrado pela internet, mas é uma ótima forma de práticar o entendimento do código de outras pessoas, além de praticar o seu conhecimento na tecnologia.

Se você acha que o CSS ainda é um ponto fraco seu, experimente também alterar projetos e outras pessoas e adicionar novas funcionalidades. Você verá que irá aprender muito com isso.