走るCSSキャラクター
英語から翻訳
クレジット : @kouryde_i
クレジットしないと許さないよ
<!-- =========================================================
走るページドール
注意: これには4つの走るスプライトが必要です。つまり、キャラクターが歩く4つの異なる画像です。
========================================================= -->
<div class="pagedoll-runner" id="pagedoll-runner">
<!--
4つの走るフレームはすべて一度に読み込まれます。CSSはそれらの間をフェードすることでアニメーションを処理します。
-->
<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"
>
<!-- 敗北スプライト -->
<img
src="your_image_link"
alt=""
class="pagedoll-defeat"
draggable="false"
>
</div>
<style>
/* =========================================================
メインページドール
========================================================= */
.pagedoll-runner {
/* サイズ */
width: 120px;
height: 120px;
/* 位置 */
position: fixed;
/*
画面の左側の完全に外側から始まります。
*/
left: -140px;
bottom: 12px;
/*
非常に高いスタッキング順序。
一部の既存のCSSは3000や20000のような値を使用しているので、これは意図的にそれよりはるかに高くしています。
*/
: 2147483647 !important;
/*
独自のスタッキングコンテキストを作ります。
*/
isolation: isolate;
/*
プロフィールボックスのレイアウトに影響されないようにします。
*/
margin: 0 !important;
padding: 0 !important;
/*
ドール全体がビューポートを横切って移動します。
*/
animation:
pagedoll-cross-screen
8s
linear
infinite;
/*
実際にクリックを受け取れるようにします。
*/
pointer-events: auto;
cursor: pointer;
/*
変なテキスト/画像の選択を防ぎます。
*/
user-select: none;
-webkit-user-select: none;
/*
水平スクロールバーを作らせないようにします。
*/
overflow: visible;
}
/* =========================================================
すべてのスプラ イト
========================================================= */
.pagedoll-runner .pagedoll-frame,
.pagedoll-runner .pagedoll-defeat {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 120px !important;
height: 120px !important;
/*
これはJanitorの通常の画像スタイリングがスプライトを引き伸ばしたり切り取ったりするのを防ぎます。
*/
object-fit: contain !important;
/*
重要:
すべてのスプライトは互いの真上に配置されます。
*/
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: none !important;
box-shadow: none !important;
/*
クリックを横取りしてはいけません。
親の.pagedoll-runnerが受け取ります。
*/
pointer-events: none;
/*
画像のドラッグを防ぎます。
*/
user-select: none;
-webkit-user-drag: none;
}
/* =========================================================
走るスプライトフレーム
========================================================= */
/*
一度に1つのフレームだけが表示されます。
アニメーションは0.64秒続きます:
1 → 2 → 3 → 4 → 繰り返し
これはおよそ毎秒6.25フレームです。
*/
.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;
}
/* フレーム1 */
@keyframes pagedoll-frame-1 {
0%,
24.999% {
opacity: 1;
}
25%,
100% {
opacity: 0;
}
}
/* フレーム2 */
@keyframes pagedoll-frame-2 {
0%,
24.999% {
opacity: 0;
}
25%,
49.999% {
opacity: 1;
}
50%,
100% {
opacity: 0;
}
}
/* フレーム3 */
@keyframes pagedoll-frame-3 {
0%,
49.999% {
opacity: 0;
}
50%,
74.999% {
opacity: 1;
}
75%,
100% {
opacity: 0;
}
}
/* フレーム4 */
@keyframes pagedoll-frame-4 {
0%,
74.999% {
opacity: 0;
}
75%,
99.999% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* =========================================================
画面全体を横切る移動
========================================================= */
@keyframes pagedoll-cross-screen {
/*
左端の外側から始まります。
*/
0% {
left: -140px;
}
/*
画面を端から端まで走り抜けます。
*/
100% {
left: calc(100vw + 140px);
}
}
/* =========================================================
敗北スプライト
========================================================= */
.pagedoll-defeat {
/*
走っている間は非表示。
*/
opacity: 0 !important;
/*
アクティブになったときに走るフレームの上に置きます。
*/
: 20 !important;
}
/* =========================================================
クリック/タップ状態
========================================================= */
/*
巧妙なトリック: :focus-withinはページドールがタップ/クリックされたときにアクティブになります。親は走るのをやめます。4つの走るスプライトが消えます。敗北スプライトが現れます。(何らかの理由でこれは機能しないので、キャラクターはただループで走り続けます)
*/
.pagedoll-runner:focus-within {
animation-play-state: paused;
cursor: default;
}
/* クリック後に走るスプライトを隠す */
.pagedoll-runner:focus-within .pagedoll-frame {
animation-play-state: paused;
opacity: 0 !important;
}
/* 敗北スプライトを表示 */
.pagedoll-runner:focus-within .pagedoll-defeat {
opacity: 1 !important;
}
/* =========================================================
小さな敗北エフェクト
========================================================= */
.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);
}
}
/* =========================================================
デスクトップ
========================================================= */
@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;
}
}
/* =========================================================
モバイル
========================================================= */
@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;
}
}
/* =========================================================
モーション軽減アクセシビリティ
========================================================= */
@media (prefers-reduced-motion: reduce) {
.pagedoll-runner {
animation-duration: 12s;
}
.pagedoll-runner .pagedoll-frame {
animation-duration: 1.2s;
}
}
</style>
ごめんね、まだ敗北アニメーションを修正する方法を考え中なんだ
作成済み 19 de set.
更新済み 19 de set.
公開済み 19 de set.
- 無制限