会跑的CSS角色
译自英语
鸣谢 : @kouryde_i
如果你不署名,我就来找你
<!-- =========================================================
会跑动的页面小人
注意:你需要4张奔跑精灵图。也就是,你角色走动的四张不同图片。
========================================================= -->
<div class="pagedoll-runner" id="pagedoll-runner">
<!--
四张奔跑帧会同时加载。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;
}
/* =========================================================
奔跑精灵帧
========================================================= */
/*
同一时间只有一帧可见。
动画持续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会激活。父元素停止奔跑。四张奔跑精灵图消失。倒地精灵图出现。(不知为何这不起作用,所以你的角色只会一直循环奔跑)
*/
.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. Sept.
已更新 19. Sept.
已发布 19. Sept.
- 无限制