init: коллекция анимаций
— Добавлен Rolling Letters Loader (текстовый барабан) — Добавлен Helix DNA Loader (3D спираль) — Добавлен Lightsaber Fight Loader (сражение на мечах) — Добавлен Pancake Cooking Loader (подбрасывание блинчика) — Добавлен Pong Game Loader (ретро-игра) — Создан общий README.md с навигационной таблицей
This commit is contained in:
Executable
+15
@@ -0,0 +1,15 @@
|
||||
# 🥞 Making Pancake Loader
|
||||
|
||||
Невероятно детальный и "вкусный" индикатор загрузки, имитирующий приготовление блинчика на сковороде. Полностью реализован на чистом CSS.
|
||||
|
||||
### Особенности
|
||||
|
||||
- **Комплексная физика**: Анимация включает в себя наклон сковороды (`flip`), подбрасывание блинчика (`jump`) и его переворот в воздухе (`fly`).
|
||||
- **Эффект пара**: Реализован через систему "пузырьков" (`.bubble`) с разными задержками и кривыми Безье для естественности.
|
||||
- **Адаптивность (vh/vw)**: Размеры элементов привязаны к высоте экрана, что позволяет лоадеру корректно масштабироваться.
|
||||
|
||||
### Технические детали
|
||||
|
||||
- **Keyframes Magic**: Используется 5 различных сценариев анимации, работающих синхронно.
|
||||
- **3D Transform**: Переворот блинчика имитируется через `rotateX` и `rotateY`.
|
||||
- **Typography**: Интегрирован шрифт "Amatic SC" через Google Fonts для создания уютной атмосферы.
|
||||
Executable
+31
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>CodePen - 'Making pancake' loader</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<!-- partial:index.partial.html -->
|
||||
<h1>Cooking in progress..</h1>
|
||||
<div id="cooking">
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble"></div>
|
||||
<div class="bubble"></div>
|
||||
<div id="area">
|
||||
<div id="sides">
|
||||
<div id="pan"></div>
|
||||
<div id="handle"></div>
|
||||
</div>
|
||||
<div id="pancake">
|
||||
<div id="pastry"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- partial -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Executable
+236
@@ -0,0 +1,236 @@
|
||||
@import url("https://fonts.googleapis.com/css?family=Amatic+SC");
|
||||
body {
|
||||
background-color: #ffde6b;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h1 {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
top: 25vh;
|
||||
width: 100vw;
|
||||
text-align: center;
|
||||
font-family: "Amatic SC";
|
||||
font-size: 6vh;
|
||||
color: #333;
|
||||
opacity: 0.75;
|
||||
animation: pulse 2.5s linear infinite;
|
||||
}
|
||||
|
||||
#cooking {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
top: 0;
|
||||
width: 75vh;
|
||||
height: 75vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
#cooking .bubble {
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 0 0.25vh #4d4d4d;
|
||||
opacity: 0;
|
||||
}
|
||||
#cooking .bubble:nth-child(1) {
|
||||
margin-top: 2.5vh;
|
||||
left: 58%;
|
||||
width: 2.5vh;
|
||||
height: 2.5vh;
|
||||
background-color: #454545;
|
||||
animation: bubble 2s cubic-bezier(0.53, 0.16, 0.39, 0.96) infinite;
|
||||
}
|
||||
#cooking .bubble:nth-child(2) {
|
||||
margin-top: 3vh;
|
||||
left: 52%;
|
||||
width: 2vh;
|
||||
height: 2vh;
|
||||
background-color: #3d3d3d;
|
||||
animation: bubble 2s ease-in-out 0.35s infinite;
|
||||
}
|
||||
#cooking .bubble:nth-child(3) {
|
||||
margin-top: 1.8vh;
|
||||
left: 50%;
|
||||
width: 1.5vh;
|
||||
height: 1.5vh;
|
||||
background-color: #333;
|
||||
animation: bubble 1.5s cubic-bezier(0.53, 0.16, 0.39, 0.96) 0.55s infinite;
|
||||
}
|
||||
#cooking .bubble:nth-child(4) {
|
||||
margin-top: 2.7vh;
|
||||
left: 56%;
|
||||
width: 1.2vh;
|
||||
height: 1.2vh;
|
||||
background-color: #2b2b2b;
|
||||
animation: bubble 1.8s cubic-bezier(0.53, 0.16, 0.39, 0.96) 0.9s infinite;
|
||||
}
|
||||
#cooking .bubble:nth-child(5) {
|
||||
margin-top: 2.7vh;
|
||||
left: 63%;
|
||||
width: 1.1vh;
|
||||
height: 1.1vh;
|
||||
background-color: #242424;
|
||||
animation: bubble 1.6s ease-in-out 1s infinite;
|
||||
}
|
||||
#cooking #area {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
background-color: transparent;
|
||||
transform-origin: 15% 60%;
|
||||
animation: flip 2.1s ease-in-out infinite;
|
||||
}
|
||||
#cooking #area #sides {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-origin: 15% 60%;
|
||||
animation: switchSide 2.1s ease-in-out infinite;
|
||||
}
|
||||
#cooking #area #sides #handle {
|
||||
position: absolute;
|
||||
bottom: 18%;
|
||||
right: 80%;
|
||||
width: 35%;
|
||||
height: 20%;
|
||||
background-color: transparent;
|
||||
border-top: 1vh solid #333;
|
||||
border-left: 1vh solid transparent;
|
||||
border-radius: 100%;
|
||||
transform: rotate(20deg) rotateX(0deg) scale(1.3, 0.9);
|
||||
}
|
||||
#cooking #area #sides #pan {
|
||||
position: absolute;
|
||||
bottom: 20%;
|
||||
right: 30%;
|
||||
width: 50%;
|
||||
height: 8%;
|
||||
background-color: #333;
|
||||
border-radius: 0 0 1.4em 1.4em;
|
||||
transform-origin: -15% 0;
|
||||
}
|
||||
#cooking #area #pancake {
|
||||
position: absolute;
|
||||
top: 24%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: rotateX(85deg);
|
||||
animation: jump 2.1s ease-in-out infinite;
|
||||
}
|
||||
#cooking #area #pancake #pastry {
|
||||
position: absolute;
|
||||
bottom: 26%;
|
||||
right: 37%;
|
||||
width: 40%;
|
||||
height: 45%;
|
||||
background-color: #333;
|
||||
box-shadow: 0 0 3px 0 #333;
|
||||
border-radius: 100%;
|
||||
transform-origin: -20% 0;
|
||||
animation: fly 2.1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
0% {
|
||||
top: 24%;
|
||||
transform: rotateX(85deg);
|
||||
}
|
||||
25% {
|
||||
top: 10%;
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
50% {
|
||||
top: 30%;
|
||||
transform: rotateX(85deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(85deg);
|
||||
}
|
||||
}
|
||||
@keyframes flip {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
5% {
|
||||
transform: rotate(-27deg);
|
||||
}
|
||||
30%, 50% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
55% {
|
||||
transform: rotate(27deg);
|
||||
}
|
||||
83.3% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
@keyframes switchSide {
|
||||
0% {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
}
|
||||
@keyframes fly {
|
||||
0% {
|
||||
bottom: 26%;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
10% {
|
||||
bottom: 40%;
|
||||
}
|
||||
50% {
|
||||
bottom: 26%;
|
||||
transform: rotate(-190deg);
|
||||
}
|
||||
80% {
|
||||
bottom: 40%;
|
||||
}
|
||||
100% {
|
||||
bottom: 26%;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
@keyframes bubble {
|
||||
0% {
|
||||
transform: scale(0.15, 0.15);
|
||||
top: 80%;
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1, 1.1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.33, 0.33);
|
||||
top: 60%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1, 1);
|
||||
opacity: 0.25;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1, 1);
|
||||
opacity: 0.25;
|
||||
}
|
||||
}
|
||||
Executable
+250
@@ -0,0 +1,250 @@
|
||||
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');
|
||||
|
||||
$anim_time: 2.1; // main pan/pancake animation (in seconds)
|
||||
$flatten_deg: 85; // how round will the pancake be at the top/peak (in deg), affecting general animation though so not really adjustable
|
||||
$angle: 27; // max pan's angle while flipping (in deg)
|
||||
$peak: 40%; // pancake's highest level, obviously ;)
|
||||
$color_back: #ffde6b; // background
|
||||
$color: #333; // the rest
|
||||
|
||||
body {
|
||||
background-color: $color_back;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
h1 {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
top: 25vh;
|
||||
width: 100vw;
|
||||
text-align: center;
|
||||
font-family: 'Amatic SC';
|
||||
font-size: 6vh;
|
||||
color: $color;
|
||||
opacity: .75;
|
||||
animation: pulse 2.5s linear infinite;
|
||||
}
|
||||
|
||||
#cooking {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
top: 0;
|
||||
width: 75vh;
|
||||
height: 75vh;
|
||||
overflow: hidden;
|
||||
.bubble {
|
||||
position: absolute;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 0 .25vh lighten($color, 10%);
|
||||
opacity: 0;
|
||||
}
|
||||
.bubble:nth-child(1) {
|
||||
margin-top: 2.5vh;
|
||||
left: 58%;
|
||||
width: 2.5vh;
|
||||
height: 2.5vh;
|
||||
background-color: lighten($color, 7%);
|
||||
animation: bubble 2s cubic-bezier(.53, .16, .39, .96) infinite;
|
||||
}
|
||||
.bubble:nth-child(2) {
|
||||
margin-top: 3vh;
|
||||
left: 52%;
|
||||
width: 2vh;
|
||||
height: 2vh;
|
||||
background-color: lighten($color, 4%);
|
||||
animation: bubble 2s ease-in-out .35s infinite;
|
||||
}
|
||||
.bubble:nth-child(3) {
|
||||
margin-top: 1.8vh;
|
||||
left: 50%;
|
||||
width: 1.5vh;
|
||||
height: 1.5vh;
|
||||
background-color: $color;
|
||||
animation: bubble 1.5s cubic-bezier(.53, .16, .39, .96) .55s infinite;
|
||||
}
|
||||
.bubble:nth-child(4) {
|
||||
margin-top: 2.7vh;
|
||||
left: 56%;
|
||||
width: 1.2vh;
|
||||
height: 1.2vh;
|
||||
background-color: darken($color, 3%);
|
||||
animation: bubble 1.8s cubic-bezier(.53, .16, .39, .96) .9s infinite;
|
||||
}
|
||||
.bubble:nth-child(5) {
|
||||
margin-top: 2.7vh;
|
||||
left: 63%;
|
||||
width: 1.1vh;
|
||||
height: 1.1vh;
|
||||
background-color: darken($color, 6%);
|
||||
animation: bubble 1.6s ease-in-out 1s infinite;
|
||||
}
|
||||
#area {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
background-color: transparent;
|
||||
transform-origin: 15% 60%;
|
||||
animation: flip #{$anim_time}s ease-in-out infinite;
|
||||
#sides {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform-origin: 15% 60%;
|
||||
animation: switchSide #{$anim_time}s ease-in-out infinite;
|
||||
#handle {
|
||||
position: absolute;
|
||||
bottom: 18%;
|
||||
right: 80%;
|
||||
width: 35%;
|
||||
height: 20%;
|
||||
background-color: transparent;
|
||||
border-top: 1vh solid $color;
|
||||
border-left: 1vh solid transparent;
|
||||
border-radius: 100%;
|
||||
transform: rotate(20deg) rotateX(0deg) scale(1.3, .9);
|
||||
}
|
||||
#pan {
|
||||
position: absolute;
|
||||
bottom: 20%;
|
||||
right: 30%;
|
||||
width: 50%;
|
||||
height: 8%;
|
||||
background-color: $color;
|
||||
border-radius: 0 0 1.4em 1.4em;
|
||||
transform-origin: -15% 0;
|
||||
}
|
||||
}
|
||||
#pancake {
|
||||
position: absolute;
|
||||
top: 24%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: rotateX(85deg);
|
||||
animation: jump #{$anim_time}s ease-in-out infinite;
|
||||
#pastry {
|
||||
position: absolute;
|
||||
bottom: 26%;
|
||||
right: 37%;
|
||||
width: 40%;
|
||||
height: 45%;
|
||||
background-color: $color;
|
||||
box-shadow: 0 0 3px 0 $color;
|
||||
border-radius: 100%;
|
||||
transform-origin: -20% 0;
|
||||
animation: fly #{$anim_time}s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes jump {
|
||||
0% {
|
||||
top: 24%;
|
||||
transform: rotateX(#{$flatten_deg}deg);
|
||||
}
|
||||
25% {
|
||||
top: 10%;
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
50% {
|
||||
top: 30%;
|
||||
transform: rotateX(#{$flatten_deg}deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(#{$flatten_deg}deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flip {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
5% {
|
||||
transform: rotate(-#{$angle}deg);
|
||||
}
|
||||
30%,
|
||||
50% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
55% {
|
||||
transform: rotate(#{$angle}deg);
|
||||
}
|
||||
83.3% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes switchSide {
|
||||
0% {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fly {
|
||||
0% {
|
||||
bottom: 26%;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
10% {
|
||||
bottom: $peak;
|
||||
}
|
||||
50% {
|
||||
bottom: 26%;
|
||||
transform: rotate(-190deg);
|
||||
}
|
||||
80% {
|
||||
bottom: $peak;
|
||||
}
|
||||
100% {
|
||||
bottom: 26%;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bubble {
|
||||
0% {
|
||||
transform: scale(.15, .15);
|
||||
top: 80%;
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.1, 1.1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(.33, .33);
|
||||
top: 60%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1, 1);
|
||||
opacity: .25;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.2, 1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1, 1);
|
||||
opacity: .25;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user