Cascading Style Sheets (CSS) é um mecanismo para adicionar estilo (cores, fontes, espaçamento) a um documento web. O código CSS pode ser aplicado diretamente nas tags ou ficar contido dentro das tags <style>.

Também é possível, em vez de colocar a formatação dentro do documento, criar um link para um arquivo CSS que contém os estilos. Assim, quando se quiser alterar a aparência dos documentos vinculados a este arquivo CSS, basta modifica-lo.

Para quem curte CSS ou esta aprendendo, resolvemos dar uma forcinha com estilos disponíveis na internet com 24 carregadores CSS para seu próximo projeto.

Somente escolher o seu e clicar:

 


HTML
<div class="dots-1"></div>
<div class="dots-2"></div>
<div class="dots-3"></div>
<div class="dots-4"></div>
<div class="dots-5"></div>
<div class="dots-6"></div>
<div class="dots-7"></div>
<div class="dots-8"></div>
<div class="dots-9"></div>
<div class="dots-10"></div>

.dots-1 {
  width:32px;
  height:32px;
  --c:radial-gradient(circle closest-side,currentColor 90%,#0000);
  background: 
    var(--c) 0    0,
    var(--c) 0    100%,
    var(--c) 100% 100%;
  background-size:12px 12px;
  background-repeat: no-repeat;
  animation:d1 1s infinite linear;
}
@keyframes d1 {
    25% {background-position:100% 0   ,0 100%,100% 100%}
    50% {background-position:100% 0   ,0 0   ,100% 100%}
    75% {background-position:100% 0   ,0 0   ,0    100%}
    100%{background-position:100% 100%,0 0   ,0    100%}
}

.dots-2 {
  width:50px;
  height:28px;
  --c:radial-gradient(farthest-side,currentColor 90%,#0000);
  background: 
    var(--c) 0    50%,
    var(--c) 50%  50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size:12px 12px;
  background-repeat: no-repeat;
  animation:d2 1s infinite linear;
}
@keyframes d2 {
    33%  {background-position:0   0  ,50% 100%,50%  100%,100% 0}
    66%  {background-position:50% 0  ,0   100%,100% 100%,50%  0}
    100% {background-position:50% 50%,0   50% ,100% 50% ,50%  50%}
}

.dots-3 {
  width:50px;
  height:28px;
  background: 
    radial-gradient(farthest-side at bottom,currentColor 90%,#0000) 0    calc(50% - 3px),
    radial-gradient(farthest-side at top   ,currentColor 90%,#0000) 0    calc(50% + 3px),

    radial-gradient(farthest-side at bottom,currentColor 90%,#0000) 50%  calc(50% - 3px),
    radial-gradient(farthest-side at top   ,currentColor 90%,#0000) 50%  calc(50% + 3px),

    radial-gradient(farthest-side at bottom,currentColor 90%,#0000) 100% calc(50% - 3px),
    radial-gradient(farthest-side at top   ,currentColor 90%,#0000) 100% calc(50% + 3px);
  background-size:12px 6px;
  background-repeat: no-repeat;
  animation:d3 1s infinite linear;
}
@keyframes d3 {
    16.67% {background-position:0 0,0 100%,50% calc(50% - 3px),50% calc(50% + 3px),100% calc(50% - 3px),100% calc(50% + 3px)}
    33.33% {background-position:0 0,0 100%,50% 0,50% 100%,100% calc(50% - 3px),100% calc(50% + 3px)}
    50%    {background-position:0 0,0 100%,50% 0,50% 100%,100% 0,100% 100%}
    66.67% {background-position:0 calc(50% - 3px),0 calc(50% + 3px),50% 0,50% 100%,100% 0,100% 100%}
    83.33% {background-position:0 calc(50% - 3px),0 calc(50% + 3px),50% calc(50% - 3px),50% calc(50% + 3px),100% 0,100% 100%}
}


.dots-4 {
  width:50px;
  height:28px;
  background: 
    radial-gradient(farthest-side,currentColor 90%,#0000) 0   50%/12px 12px,

    radial-gradient(farthest-side at bottom,currentColor 90%,#0000) 50%  calc(50% - 3px)/12px 6px,
    radial-gradient(farthest-side at top   ,currentColor 90%,#0000) 50%  calc(50% + 3px)/12px 6px,

    radial-gradient(farthest-side at bottom,currentColor 90%,#0000) 100% calc(50% - 3px)/12px 6px,
    radial-gradient(farthest-side at top   ,currentColor 90%,#0000) 100% calc(50% + 3px)/12px 6px;
  background-repeat: no-repeat;
  animation:d4 1s infinite;
}
@keyframes d4 {
    25%  {background-position:0    50%,50% 0,50% 100%,100% 0,100% 100%}
    50%  {background-position:100% 50%,0   0,0   100%,50%  0,50%  100%}
    75%,
    100% {background-position:100% 50%,0 calc(50% - 3px),0 calc(50% + 3px),50% calc(50% - 3px),50% calc(50% + 3px)}
}

.dots-5 {
  width:50px;
  height:12px;
  background: 
    radial-gradient(farthest-side,currentColor 90%,#0000) left,
    radial-gradient(farthest-side,currentColor 90%,#0000) right;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  position: relative;
  animation: d5-0 1s infinite linear;
}
.dots-5::before {
  content:"";
  position: absolute;
  background:currentColor;
  border-radius: 50%;
  inset:0 calc(50% - 6px);
  transform-origin: -13px 50%;
  animation: d5-1 0.5s infinite linear;
}

@keyframes d5-0 { 
    0%,49.99% {transform:scale(1)}
    50%,100%  {transform:scale(-1)} 
}

@keyframes d5-1 { 
    80%,100% {transform:rotate(1turn)} 
}

.dots-6 {
  width:30px;
  height:27.6px;
  --c:radial-gradient(farthest-side,currentColor 90%,#0000);
  background: 
    var(--c) 50%  0,
    var(--c) 0    100%,
    var(--c) 100% 100%;
  background-size: 12px 12px;
  background-repeat: no-repeat;
  position: relative;
  animation: d6 1s infinite;
}

@keyframes d6{ 
    50%,100% {background-position: 100% 100%,50% 0,0 100%} 
}

.dots-7 {
  width:12px;
  height:12px;
  border-radius: 50%;
  clip-path: inset(-25px -100px);
  box-shadow: 19px -40px,38px -40px,57px -40px;
  transform: translateX(-38px);
  animation: d7 1s infinite;
}

@keyframes d7{ 
  16.67% {box-shadow: 19px  0px,38px -40px,57px -40px}
  33.33% {box-shadow: 19px  0px,38px   0px,57px -40px}
  45%,55%{box-shadow: 19px  0px,38px   0px,57px   0px}
  66.67% {box-shadow: 19px 40px,38px   0px,57px   0px}
  83.33% {box-shadow: 19px 40px,38px  40px,57px   0px}
  100%   {box-shadow: 19px 40px,38px  40px,57px  40px}
}


.dots-8 {
  width:12px;
  height:12px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: -19px 0px,19px 0px;
  animation: d8 1s infinite;
}

@keyframes d8{ 
  25%  {box-shadow: -19px -19px, 19px 19px}
  50%  {box-shadow:   0px -19px,  0px 19px}
  75%  {box-shadow:  19px -19px,-19px 19px}
  100% {box-shadow:  19px   0px,-19px  0px}
}

.dots-9 {
  width:12px;
  height:12px;
  border-radius: 50%;
  clip-path: inset(-45px);
  box-shadow: -60px 15px,-60px 15px,-60px 15px;
  transform: translateY(-15px);
  animation: d9 1s infinite linear;
}

@keyframes d9{ 
  16.67% {box-shadow:-60px 15px,-60px 15px,19px 15px}
  33.33% {box-shadow:-60px 15px,  0px 15px,19px 15px}
  40%,60%{box-shadow:-19px 15px,  0px 15px,19px 15px}
  66.67% {box-shadow:-19px 15px,  0px 15px,60px 15px}
  83.33% {box-shadow:-19px 15px, 60px 15px,60px 15px}
  100%   {box-shadow: 60px 15px, 60px 15px,60px 15px}
}


.dots-10 {
  width:76px;
  height:12px;
  display: flex;
}
.dots-10:before,
.dots-10:after {
  content:"";
  flex:1;
  background:
    radial-gradient(farthest-side         ,currentColor 90%,#0000) center/12px 100%,
    radial-gradient(farthest-side at right,currentColor 90%,#0000) right /6px  100%;
  background-repeat: no-repeat;
  transform:scale(var(--s,1)) translate(0px) rotate(0);
  animation:d10 2s infinite;
}
.dots-10:after {
  --s:-1;
}
@keyframes d10 {
    25%      {transform:scale(var(--s,1)) translate(-10px) rotate(0);}
    50%      {transform:scale(var(--s,1)) translate(-10px) rotate(1turn);}
    75%,100% {transform:scale(var(--s,1)) translate(0px)   rotate(1turn);}
}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}

* {
  box-sizing: border-box;
}

HTML
<div class="flipping-1"></div>
<div class="flipping-2"></div>
<div class="flipping-3"></div>
<div class="flipping-4"></div>
<div class="flipping-5"></div>
<div class="flipping-6"></div>
<div class="flipping-7"></div>
<div class="flipping-8"></div>
<div class="flipping-9"></div>
<div class="flipping-10"></div>
.flipping-1 {
  width: 40px;
  height: 40px;
  background:#000;
  transform:perspective(150px) rotateX(0);
  animation: f1 1s infinite;
}

@keyframes f1 {
  100% {transform:perspective(150px) rotateX(180deg)}
}

.flipping-2 {
  width: 40px;
  height: 40px;
  transform:perspective(150px) rotateX(0);
  animation: 
    f1-1 2s infinite linear,
    f1-2 1s infinite linear alternate;
}

@keyframes f1-1 {
  100% {transform:perspective(150px) rotateX(360deg)}
}

@keyframes f1-2 {
  0%,49.9% {background:#ffa516}
  50%,100% {background:#f03355}
}


.flipping-3 {
  width: 40px;
  height: 40px;
  transform:perspective(150px) rotateX(0) rotateY(0);
  animation: 
    f3-1 2s infinite linear,
    f3-2 3s infinite linear -.5s;
}

@keyframes f3-1 {
  50%  {transform:perspective(150px) rotateX(180deg) rotateY(0)}
  100% {transform:perspective(150px) rotateX(180deg) rotateY(180deg)}
}

@keyframes f3-2 {
  0%,33%     {background:#ffa516}
  33.1%,66%  {background:#f03355}
  66.1%,100% {background:#25b09b}
}

.flipping-4 {
  width: 60px;
  height: 60px;
  animation: f4-0 2s infinite linear;
}
.flipping-4::before {
  content:"";
  display:block;
  width:50%;
  height:50%;
  transform:perspective(150px) rotateX(0deg);
  transform-origin: bottom; 
  animation: 
    f4-1 0.5s infinite linear alternate,
    f4-2 0.5s infinite linear alternate;
}

@keyframes f4-0 {
  0%,24.99%  {transform:scale(1 , 1) rotate(0deg)}
  25%,49.99% {transform:scale(1 ,-1) rotate(90deg)}
  50%,74.99% {transform:scale(-1,-1) rotate(0deg)}
  75%,100%   {transform:scale(-1, 1) rotate(90deg)}
}


@keyframes f4-1 {
  100% {transform:perspective(150px) rotateX(180deg)}
}

@keyframes f4-2 {
  0%,49.9% {background:#ffa516}
  50%,100% {background:#f03355}
}

.flipping-5 {
  width: 60px;
  height: 60px;
  animation: f5-0 1s infinite linear;
}
.flipping-5::before,
.flipping-5::after {
  content:"";
  position: absolute;
  inset:0 50% 50% 0;
  transform:scale(var(--s,1)) perspective(150px) rotateX(0deg);
  transform-origin: bottom right; 
  animation: 
    f5-1 0.5s infinite linear alternate,
    f5-2 0.5s infinite linear alternate;
}
.flipping-5::after {
  --s:-1,-1;
}

@keyframes f5-0 {
  0%,49.99% {transform:scale(1, 1) rotate(0deg)}
  50%,100%  {transform:scale(1,-1) rotate(90deg)}
}


@keyframes f5-1 {
  100% {transform:scale(var(--s,1)) perspective(150px) rotateX(180deg)}
}

@keyframes f5-2 {
  0%,49.9% {background:#25b09b}
  50%,100% {background:#514b82}
}


.flipping-6 {
  width: 60px;
  height: 60px;
  color: #25b09b; 
  background:
    linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0);
  background-size: 50.1% 50.1%;
  background-repeat: no-repeat;
  animation: 
    f6-0   1.5s infinite linear alternate,
    f6-0-0 3s   infinite linear;
}
.flipping-6::before {
  content:"";
  display:block;
  width:50%;
  height:50%;
  background:currentColor;
  transform:perspective(150px) rotateY(0deg) rotateX(0deg);
  transform-origin: bottom right; 
  animation: f6-1 1.5s infinite linear alternate;
}


@keyframes f6-0 {
  0% ,32.99% {background-position: 0    100%,100% 100%,100% 0}
  33%,65.99% {background-position: 100% 100%,100% 100%,100% 0}
  66%,100%   {background-position: 100% 0   ,100% 0   ,100% 0}
}

@keyframes f6-0-0 {
  0%,49.99% {transform: scaleX(1)  rotate(0deg)}
  50%,100%  {transform: scaleX(-1) rotate(-90deg)}
}


@keyframes f6-1 {
  16.5%{transform:perspective(150px) rotateX(-90deg)  rotateY(0deg)    rotateX(0deg);filter:grayscale(0.8)}
  33%  {transform:perspective(150px) rotateX(-180deg) rotateY(0deg)    rotateX(0deg)}
  66%  {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0deg)}
  100% {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);filter:grayscale(0.8)}
}

.flipping-7 {
  width: 60px;
  height: 60px;
  color: #ffa516; 
  background:
    linear-gradient(currentColor 0 0) 100%  0,
    linear-gradient(currentColor 0 0) 0  100%;
  background-size: 50.1% 50.1%;
  background-repeat: no-repeat;
  animation:  f7-0 1s infinite linear;
}
.flipping-7::before,
.flipping-7::after {
  content:"";
  position: absolute;
  inset:0 50% 50% 0;
  background:currentColor;
  transform:scale(var(--s,1)) perspective(150px) rotateY(0deg);
  transform-origin: bottom right; 
  animation: f7-1 .5s infinite linear alternate;
}
.flipping-7::after {
  --s:-1,-1;
}

@keyframes f7-0 {
  0%,49.99% {transform: scaleX(1)  rotate(0deg)}
  50%,100%  {transform: scaleX(-1) rotate(-90deg)}
}


@keyframes f7-1 {
  49.99% {transform:scale(var(--s,1)) perspective(150px) rotateX(-90deg) ;filter:grayscale(0)}
  50%    {transform:scale(var(--s,1)) perspective(150px) rotateX(-90deg) ;filter:grayscale(0.8)}
  100%   {transform:scale(var(--s,1)) perspective(150px) rotateX(-180deg);filter:grayscale(0.8)}
}

.flipping-8 {
  width: 60px;
  height: 60px;
  display: flex;
  animation: f8-0 2s infinite linear;
}
.flipping-8::before,
.flipping-8::after {
  content:"";
  flex:1;
  animation: 
    f8-1 1s infinite linear alternate,
    f8-2 2s infinite linear -.5s;
}
.flipping-8::after {
  --s:-1,-1;
}

@keyframes f8-0 {
  0%,49.99% {transform: scaleX(1)  rotate(0deg)}
  50%,100%  {transform: scaleX(-1) rotate(-90deg)}
}

@keyframes f8-1 {
  0%,
  5%   {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateY(0deg) }
  33%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(0deg) }
  66%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(-180deg)}
  95%,
  100% {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateX(-180deg)}
}

@keyframes f8-2 {
  0%,49.99% {background:#f03355}
  50%,100%  {background:#ffa516}
}


.flipping-9 {
  width: 60px;
  height: 60px;
  color: #ffa516; 
  border-radius: 50%;
  background:
    linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0),
    linear-gradient(currentColor 0 0);
  background-size: 50.1% 50.1%;
  background-repeat: no-repeat;
  animation: 
    f9-0   1.5s infinite linear alternate,
    f9-0-0 3s   infinite linear alternate;
}
.flipping-9::before {
  content:"";
  display:block;
  width:50%;
  height:50%;
  background:currentColor;
  border-top-left-radius: 100px;
  transform:perspective(150px) rotateY(0deg) rotateX(0deg);
  transform-origin: bottom right; 
  animation: f9-1 1.5s infinite linear alternate;
}


@keyframes f9-0 {
  0% ,32.99% {background-position: 0    100%,100% 100%,100% 0}
  33%,65.99% {background-position: 100% 100%,100% 100%,100% 0}
  66%,100%   {background-position: 100% 0   ,100% 0   ,100% 0}
}

@keyframes f9-0-0 {
  0%,49.99% {transform: scaleX(1)  rotate(0deg)}
  50%,100%  {transform: scaleX(-1) rotate(-90deg)}
}


@keyframes f9-1 {
  16.5%{transform:perspective(150px) rotateX(-90deg)  rotateY(0deg)    rotateX(0deg);filter:grayscale(0.8)}
  33%  {transform:perspective(150px) rotateX(-180deg) rotateY(0deg)    rotateX(0deg)}
  66%  {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(0deg)}
  100% {transform:perspective(150px) rotateX(-180deg) rotateY(-180deg) rotateX(-180deg);filter:grayscale(0.8)}
}

.flipping-10 {
  width: 60px;
  height: 60px;
  display: flex;
  animation: f10-0 2s infinite linear;
}
.flipping-10::before,
.flipping-10::after {
  content:"";
  flex:1;
  animation: 
    f10-1 1s infinite linear alternate,
    f10-2 2s infinite linear -.5s;
}
.flipping-10::after {
  --s:-1,-1;
}

@keyframes f10-0 {
  0%,49.99% {transform: scaleX(1)  rotate(0deg)}
  50%,100%  {transform: scaleX(-1) rotate(-90deg)}
}

@keyframes f10-1 {
  0%,
  5%   {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateY(0deg) }
  33%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(0deg) }
  66%  {transform:scale(var(--s,1)) translate(-10px) perspective(150px) rotateX(-180deg)}
  95%,
  100% {transform:scale(var(--s,1)) translate(0px)   perspective(150px) rotateX(-180deg)}
}

@keyframes f10-2 {
  0%,49.99% {background:#514b82;border-radius: 0}
  50%,100%  {background:#25b09b;border-radius: 100px 0 0 100px}
}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}

* {
  box-sizing: border-box;
}

HTML

<div class="shapes-1"></div>
<div class="shapes-2"></div>
<div class="shapes-3"></div>
<div class="shapes-4"></div>
<div class="shapes-5"></div>
<div class="shapes-6"></div>
<div class="shapes-7"></div>
<div class="shapes-8"></div>
<div class="shapes-9"></div>
<div class="shapes-10"></div>



.shapes-1
{ width: 40px; height: 40px; color: #25b09b; display: grid; } .shapes-1::before, .shapes-1::after { content: ""; grid-area: 1/1; background:currentColor; clip-path: polygon(0 0,50% 50%, 0 100%); animation: sp1 2s infinite; } .shapes-1::after { animation-delay: -1.5s; --s:90deg; } @keyframes sp1 { 0%,12.5% {transform:rotate(var(--s,0deg)) rotate(0deg)} 37.5%,62.5% {transform:rotate(var(--s,0deg)) rotate(-180deg)} 87.5%,100% {transform:rotate(var(--s,0deg)) rotate(-360deg)} } .shapes-2 { width: 40px; height: 40px; color: #514b82; background:repeating-conic-gradient(from -47deg,#0000 0deg, currentColor 1deg 91deg,#0000 94deg 180deg); display: flex; animation: sp2-0 2s infinite linear; } .shapes-2::before, .shapes-2::after { content: ""; flex: 1; background:currentColor; clip-path: polygon(0 0,100% 50%, 0 100%); animation: sp2 1s infinite alternate; transform-origin: bottom left; } .shapes-2::after { clip-path: polygon(100% 0,100% 100%,0 50%); transform-origin: top right; } @keyframes sp2-0 { 0%,49.9% {transform:scaleX( 1)} 50%,100% {transform:scaleX(-1)} } @keyframes sp2 { 0%, 20% {transform:rotate(0deg)} 80%,100% {transform:rotate(-270deg)} } .shapes-3 { width: 40px; height: 40px; color: orange; display: grid; } .shapes-3::before, .shapes-3::after { content: ""; grid-area: 1/1; background:currentColor; clip-path: polygon(0 0,101% 0, 0 100%); animation: sp3 2s infinite; } .shapes-3::after { --s:-1,-1; } @keyframes sp3 { 0%, 10% {transform:scale(var(--s,1)) translate(0,0) rotate(0deg)} 33% {transform:scale(var(--s,1)) translate(20px,-20px) rotate(0deg)} 66% {transform:scale(var(--s,1)) translate(20px,-20px) rotate(180deg)} 90%, 100% {transform:scale(var(--s,1)) translate(0px,0px) rotate(180deg)} } .shapes-4 { width: 40px; height: 40px; color:#f03355; background: conic-gradient(currentColor 0 270deg,#0000 0); border-radius: 50%; animation: sp4-0 4s infinite linear; } .shapes-4::before { content: ""; display: block; height: 50%; width: 50%; border-top-left-radius: 100px; background: currentColor; animation: sp4 0.5s infinite alternate; } @keyframes sp4-0 { 0%,24.99% {transform: rotate(0deg)} 25%,49.99% {transform: rotate(90deg)} 50%,74.99% {transform: rotate(180deg)} 75%,100% {transform: rotate(270deg)} } @keyframes sp4 { 100% {transform: translate(-10px,-10px)} } .shapes-5 { width: 40px; height: 40px; display: flex; transform-origin:50% 125%; animation: sp5-0 1.5s infinite linear; } .shapes-5:before, .shapes-5:after { content:""; flex:1; background:orange; animation: inherit; transform-origin: bottom left; animation-name: sp5-1; } .shapes-5:before { transform-origin: bottom right; --s:-1; } @keyframes sp5-0 { 0%,10% {transform:translateY(0) scaleY(1)} 49.99% {transform:translateY(-75%) scaleY(1)} 50% {transform:translateY(-75%) scaleY(-1)} 90%,100% {transform:translateY(-150%) scaleY(-1)} } @keyframes sp5-1 { 10%,90% {transform: rotate(0deg)} 50% {transform: rotate(calc(var(--s,1)*90deg))} } .shapes-6 { width: 40px; height: 40px; color:#25b09b; position: relative; background: linear-gradient(currentColor 0 0) center/100% 10px, linear-gradient(currentColor 0 0) center/10px 100%; background-repeat: no-repeat; } .shapes-6:before { content:''; position: absolute; inset:0; background: linear-gradient(currentColor 0 0) 0 0, linear-gradient(currentColor 0 0) 100% 0, linear-gradient(currentColor 0 0) 0 100%, linear-gradient(currentColor 0 0) 100% 100%; background-size:15.5px 15.5px; background-repeat: no-repeat; animation: sp6 1.5s infinite cubic-bezier(0.3,1,0,1); } @keyframes sp6 { 33% {inset:-10px;transform: rotate(0deg)} 66% {inset:-10px;transform: rotate(90deg)} 100% {inset:0 ;transform: rotate(90deg)} } .shapes-7 { width: 40px; height: 60px; color: #514b82; position: relative; } .shapes-7::before, .shapes-7::after { content: ""; position: absolute; inset:0; background:currentColor; clip-path: polygon(0 0,100% 0, 100% 67%,50% 67%,50% 34%,0 34%); animation: sp7 2s infinite; } .shapes-7::after { --s:-1,-1; } @keyframes sp7 { 0%, 10% {transform:scale(var(--s,1)) translate(0,0) rotate(0deg)} 33% {transform:scale(var(--s,1)) translate(0,-20px) rotate(0deg)} 66% {transform:scale(var(--s,1)) translate(10px,-20px) rotate(-90deg)} 90%, 100% {transform:scale(var(--s,1)) translate(10px,-10px) rotate(-90deg)} } .shapes-8 { width: 40px; height: 40px; color:#f03355; position: relative; background: radial-gradient(10px,currentColor 94%,#0000); } .shapes-8:before { content:''; position: absolute; inset:0; border-radius: 50%; background: radial-gradient(9px at bottom right,#0000 94%,currentColor) top left, radial-gradient(9px at bottom left ,#0000 94%,currentColor) top right, radial-gradient(9px at top right,#0000 94%,currentColor) bottom left, radial-gradient(9px at top left ,#0000 94%,currentColor) bottom right; background-size:20px 20px; background-repeat: no-repeat; animation: sp8 1.5s infinite cubic-bezier(0.3,1,0,1); } @keyframes sp8 { 33% {inset:-10px;transform: rotate(0deg)} 66% {inset:-10px;transform: rotate(90deg)} 100% {inset:0 ;transform: rotate(90deg)} } .shapes-9 { width: 40px; height: 20px; background: orange; position: relative; animation: sp9-0 1.5s infinite linear; } .shapes-9:before, .shapes-9:after { content:""; position: absolute; background: inherit; bottom: 100%; width: 50%; height: 100%; animation: inherit; animation-name: sp9-1; } .shapes-9:before { left:0; --s:-1,1; } .shapes-9:after { right:0; } @keyframes sp9-0 { 0%,30% {transform:translateY(0) scaleY(1)} 49.99% {transform:translateY(-50%) scaleY(1)} 50% {transform:translateY(-50%) scaleY(-1)} 70%,100% {transform:translateY(-100%) scaleY(-1)} } @keyframes sp9-1 { 0%,10%,90%,100% {transform: scale(var(--s,1)) translate(0)} 30%,70% {transform: scale(var(--s,1)) translate(20px)} 50% {transform: scale(var(--s,1)) translate(20px,20px)} } .shapes-10 { width: 40px; height: 40px; display: flex; transform-origin: 0% 150%; animation: sp10-0 2s infinite linear; } .shapes-10:before, .shapes-10:after { content:""; flex:1; background:#f03355; animation: sp10-1 1s infinite linear alternate; border-radius: 100px 0 0 100px; transform-origin: 100% 100%; } .shapes-10:after { border-radius: 0 100px 100px 0; transform-origin: 0% 100%; --s:-1; } @keyframes sp10-0 { 0%,10% {transform:translateY(0) scaleY(1)} 49.99% {transform:translateY(-100%) scaleY(1)} 50% {transform:translateY(-100%) scaleY(-1)} 90%,100% {transform:translateY(-200%) scaleY(-1)} } @keyframes sp10-1 { 0%,20% {transform:rotate(0deg) translate(0,0) rotate(0deg)} 50% {transform:rotate(calc(var(--s,1)*-90deg)) translate(0,0) rotate(0deg)} 100% {transform:rotate(calc(var(--s,1)*-90deg)) translate(0,-20px) rotate(calc(var(--s,1)*-90deg))} } /**/ body { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); grid-auto-rows: 130px; place-items:center; } * { box-sizing: border-box; }

Fonte: Dev To