Kilka dni temu, zastanawiałem się, a co gdy ...
... ciekawy efekt "powstał"
[ on-line ]
<div>
<div>
<div></div>
</div>
</div>
<style>
* {
margin: 0;
padding: 0;
}
:root {
--animation-duration: 6s;
--rotate-total-time: calc(var(--animation-duration) / 2);
}
body {
display: grid;
place-content: center;
height: 100vh;
background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient var(--animation-duration) ease infinite;
}
div {
display: grid;
place-content: center;
width: 60vw;
height: 60vh;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient var(--animation-duration) ease infinite;
}
div div {
width: 40vw;
height: 40vh;
background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient var(--animation-duration) ease infinite;
}
div div div {
width: 20vw;
height: 20vh;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation:
gradient var(--animation-duration) ease infinite,
rotate var(--rotate-total-time) ease-in-out alternate infinite;
}
@keyframes gradient {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes rotate {
from {
rotate: 0;
border-radius: 0;
}
50% {
border-radius: 50%;
}
to {
rotate: 180deg; /* 360deg */
border-radius: 0;
}
}
</style>
@Wiciorny;
zmodelowanie tego grafiką 3d byłoby fajne,
takie pseudo 3d za pomocą: box-shadow
<style>
* {
margin: 0;
padding: 0;
}
:root {
--animation-duration: 6s;
--rotate-total-time: calc(var(--animation-duration) / 2);
}
body {
display: grid;
place-content: center;
height: 100vh;
background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient var(--animation-duration) ease infinite;
}
div {
display: grid;
place-content: center;
width: 60vw;
height: 60vh;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient var(--animation-duration) ease infinite;
box-shadow:
5px 5px 5px #181818, 10px 10px 10px #282828,
15px 15px 15px #383838, 20px 20px 20px #484848,
25px 25px 25px #585858, 30px 30px 30px #686868;
}
div div {
width: 40vw;
height: 40vh;
background: linear-gradient(45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient var(--animation-duration) ease infinite;
}
div div div {
width: 20vw;
height: 20vh;
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation:
gradient var(--animation-duration) ease infinite,
rotate var(--rotate-total-time) ease-in-out alternate infinite;
}
@keyframes gradient {
0%,
100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes rotate {
from {
rotate: 0;
border-radius: 0;
}
50% {
border-radius: 50%;
}
to {
rotate: 180deg; /* 360deg */
border-radius: 0;
}
}
</style>
<div>
<div>
<div></div>
</div>
</div>
lub
div {
/* ... */
box-shadow:
5px 5px 5px #181818, 10px 10px 10px #282828,
15px 15px 15px #383838, 20px 20px 20px #484848,
25px 25px 25px #585858, 30px 30px 30px #686868;
border-top: 1px solid #181818;
border-left: 1px solid #181818;
}
lub
div {
/* ... */
box-shadow:
5px 5px 5px rgba(24,24,24,1), 10px 10px 10px rgba(40,40,40,1),
15px 15px 15px rgba(56,56,56,0.95), 20px 20px 20px rgba(72,72,72,0.95),
25px 25px 25px rgba(88,88,88,0.5), 30px 30px 30px rgba(104,104,104,0.5);
border-top: 1px solid rgba(24,24,24,0.25);
border-left: 1px solid rgba(24,24,24,0.25);
}
lub
div {
/* ... */
box-shadow:
-1px -1px 1px #ee7752,
5px 5px 5px rgba(24,24,24,1), 10px 10px 10px rgba(40,40,40,1),
15px 15px 15px rgba(56,56,56,0.95), 20px 20px 20px rgba(72,72,72,0.95),
25px 25px 25px rgba(88,88,88,0.5), 30px 30px 30px rgba(104,104,104,0.5);
}
a tu cień, który "nie łamie" praw fizyki
[ on-line ]
@keyframes rotate {
from {
rotate: 0;
border-radius: 0;
border-top-color: #ee7752;
border-left-color: #ee7752;
}
50% {
border-radius: 50%;
box-shadow: none;
}
to {
rotate: 180deg; /* 360deg */
border-radius: 0;
border-top-color: #23d5ab;
border-left-color: #23d5ab;
box-shadow:
-5px -5px 5px rgba(24, 24, 24, 1), -10px -10px 10px rgba(40, 40, 40, 1),
-15px -15px 15px rgba(56, 56, 56, 0.95), -20px -20px 20px rgba(72, 72, 72, 0.95),
-25px -25px 25px rgba(88, 88, 88, 0.5), -30px -30px 30px rgba(104, 104, 104, 0.5);
}
}