postać biegająca w css
Przetłumaczono z angielskiego
by:@yoguyu_
CREDIT : @kouryde_i
jeśli nie podasz źródła, to cię dopadnę
<!-- =========================================================
LALKA BIEGAJĄCA PO STRONIE
UWAGA: potrzebujesz do tego 4 sprajtów biegu. czyli czterech różnych obrazków twojej postaci idącej.
========================================================= -->
<div class="pagedoll-runner" id="pagedoll-runner">
<!--
Wszystkie cztery klatki biegu są ładowane naraz. CSS obsługuje animację, przechodząc płynnie między nimi.
-->
<img
src="your_image_link"
alt=""
class="pagedoll-frame pagedoll-frame-1"
draggable="false"
>
<img
src="your_image_link"
alt=""
class="pagedoll-frame pagedoll-frame-2"
draggable="false"
>
<img
src="your_image_link"
alt=""
class="pagedoll-frame pagedoll-frame-3"
draggable="false"
>
<img
src="your_image_link"
alt=""
class="pagedoll-frame pagedoll-frame-4"
draggable="false"
>
<!-- sprajt porażki -->
<img
src="your_image_link"
alt=""
class="pagedoll-defeat"
draggable="false"
>
</div>
<style>
/* =========================================================
GŁÓWNA LALKA STRONY
========================================================= */
.pagedoll-runner {
/* rozmiar */
width: 120px;
height: 120px;
/* pozycja */
position: fixed;
/*
Zaczyna całkowicie poza LEWĄ stroną ekranu.
*/
left: -140px;
bottom: 12px;
/*
BARDZO wysoka kolejność nakładania.
Niektóre istniejące CSS używają wartości takich jak 3000 i 20000, więc to jest celowo znacznie wyższe.
*/
: 2147483647 !important;
/*
Utwórz własny kontekst nakładania.
*/
isolation: isolate;
/*
Nie pozwól, żeby wpływał na to układ twoich ramek profilu.
*/
margin: 0 !important;
padding: 0 !important;
/*
Cała lalka porusza się po całym widoku.
*/
animation:
pagedoll-cross-screen
8s
linear
infinite;
/*
Upewnij się, że faktycznie może odbierać kliknięcia.
*/
pointer-events: auto;
cursor: pointer;
/*
Zapobiegaj dziwnemu zaznaczaniu tekstu/obrazów.
*/
user-select: none;
-webkit-user-select: none;
/*
Nie pozwól, żeby tworzył poziomy pasek przewijania.
*/
overflow: visible;
}
/* =========================================================
WSZYSTKIE SPRAJTY
========================================================= */
.pagedoll-runner .pagedoll-frame,
.pagedoll-runner .pagedoll-defeat {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 120px !important;
height: 120px !important;
/*
To zapobiega rozciąganiu/przycinaniu sprajtów przez normalne stylizowanie obrazów w Janitorze.
*/
object-fit: contain !important;
/*
WAŻNE:
wszystkie sprajty leżą bezpośrednio jeden na drugim.
*/
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
/*
NIE powinny przechwytywać kliknięcia.
Odbiera je element nadrzędny .pagedoll-runner.
*/
pointer-events: none;
/*
Zapobiegaj przeciąganiu obrazu.
*/
user-select: none;
-webkit-user-drag: none;
}
/* =========================================================
KLATKI SPRAJTU BIEGU
========================================================= */
/*
Tylko JEDNA klatka jest widoczna naraz.
Animacja trwa 0,64 sekundy:
1 → 2 → 3 → 4 → powtórz
To mniej więcej 6,25 klatki na sekundę.
*/
.pagedoll-frame-1 {
opacity: 1;
animation:
pagedoll-frame-1
0.64s
steps(1)
infinite;
}
.pagedoll-frame-2 {
opacity: 0;
animation:
pagedoll-frame-2
0.64s
steps(1)
infinite;
}
.pagedoll-frame-3 {
opacity: 0;
animation:
pagedoll-frame-3
0.64s
steps(1)
infinite;
}
.pagedoll-frame-4 {
opacity: 0;
animation:
pagedoll-frame-4
0.64s
steps(1)
infinite;
}
/* KLATKA 1 */
@keyframes pagedoll-frame-1 {
0%,
24.999% {
opacity: 1;
}
25%,
100% {
opacity: 0;
}
}
/* KLATKA 2 */
@keyframes pagedoll-frame-2 {
0%,
24.999% {
opacity: 0;
}
25%,
49.999% {
opacity: 1;
}
50%,
100% {
opacity: 0;
}
}
/* KLATKA 3 */
@keyframes pagedoll-frame-3 {
0%,
49.999% {
opacity: 0;
}
50%,
74.999% {
opacity: 1;
}
75%,
100% {
opacity: 0;
}
}
/* KLATKA 4 */
@keyframes pagedoll-frame-4 {
0%,
74.999% {
opacity: 0;
}
75%,
99.999% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* =========================================================
RUCH PRZEZ CAŁY EKRAN
========================================================= */
@keyframes pagedoll-cross-screen {
/*
Zacznij poza lewą krawędzią.
*/
0% {
left: -140px;
}
/*
Przebiegnij przez cały ekran.
*/
100% {
left: calc(100vw + 140px);
}
}
/* =========================================================
SPRAJT PORAŻKI
========================================================= */
.pagedoll-defeat {
/*
Ukryty podczas biegu.
*/
opacity: 0 !important;
/*
Umieść go nad klatkami biegu po aktywacji.
*/
: 20 !important;
}
/* =========================================================
STAN KLIKNIĘCIA / DOTKNIĘCIA
========================================================= */
/*
Sprytny trik: :focus-within aktywuje się, gdy lalka strony zostanie dotknięta/kliknięta. Element nadrzędny przestaje biec. Cztery sprajty biegu znikają. Pojawia się sprajt porażki. (to z jakiegoś powodu nie działa, więc twoja postać po prostu biegnie w całej pętli)
*/
.pagedoll-runner:focus-within {
animation-play-state: paused;
cursor: default;
}
/* ukryj sprajty biegu po kliknięciu */
.pagedoll-runner:focus-within .pagedoll-frame {
animation-play-state: paused;
opacity: 0 !important;
}
/* pokaż sprajt porażki */
.pagedoll-runner:focus-within .pagedoll-defeat {
opacity: 1 !important;
}
/* =========================================================
MAŁY EFEKT PORAŻKI
========================================================= */
.pagedoll-runner:focus-within {
animation:
pagedoll-defeat-stop
0.35s
ease-out
forwards;
}
@keyframes pagedoll-defeat-stop {
0% {
transform:
scale(1)
rotate(0deg);
}
35% {
transform:
scale(1.12)
rotate(-8deg);
}
65% {
transform:
scale(0.95)
rotate(6deg);
}
100% {
transform:
scale(1)
rotate(0deg);
}
}
/* =========================================================
KOMPUTER
========================================================= */
@media screen and (min-width: 769px) {
.pagedoll-runner {
width: 140px;
height: 140px;
bottom: 15px;
}
.pagedoll-runner .pagedoll-frame,
.pagedoll-runner .pagedoll-defeat {
width: 140px !important;
height: 140px !important;
}
}
/* =========================================================
TELEFON
========================================================= */
@media screen and (max-width: 768px) {
.pagedoll-runner {
width: 90px;
height: 90px;
bottom: 8px;
}
.pagedoll-runner .pagedoll-frame,
.pagedoll-runner .pagedoll-defeat {
width: 90px !important;
height: 90px !important;
}
}
/* =========================================================
DOSTĘPNOŚĆ OGRANICZONEGO RUCHU
========================================================= */
@media (prefers-reduced-motion: reduce) {
.pagedoll-runner {
animation-duration: 12s;
}
.pagedoll-runner .pagedoll-frame {
animation-duration: 1.2s;
}
}
</style>
uzbrój się w cierpliwość, wciąż kombinuję, jak naprawić animację porażki
Utworzono 19 wrz
Zaktualizowano 19 wrz
Opublikowano 19 wrz
- Bez ograniczeń