24 carregadores CSS para seu próximo projeto
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 + The Dots II
HTML<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></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></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></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 + CSS de The Shapes II
HTML
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></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; }Artigos Relacionados
Sobre o Autor
