|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2023-3-20 13:10 编辑
图片(500*72):
这是长条形动作分解图片,小精灵所做的动作是挥手打招呼。图片制作非常规整,10个动作10等分,每个动作占用的宽度一致。
代码:
- <style>
- #mybox {
- --state: running;
- margin: 50px auto;
- width: 50px;
- height: 72px;
- background: url('https://638183.freep.cn/638183/t23/btn/hvuz.webp');
- background-position: 0 0;
- animation: hello 1s steps(10,jump-none) infinite var(--state);
- cursor: pointer;
- }
- @keyframes hello { to { background-position: 100% 0; } }
- </style>
- <div id="mybox"></div>
- <script>
- let stop = true;
- mybox.onclick = () => {
- mybox.style.setProperty('--state', stop ? 'paused' : 'running');
- stop = !stop;
- };
- </script>
复制代码 效果看楼下
|
评分
-
| 参与人数 1 | 威望 +50 |
金钱 +100 |
经验 +50 |
收起
理由
|
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|