之前在使用joe主题的时候,偶然发现一个非常有趣的小组件“旋转小人”。因自己折腾切换主题,很多东西都没有了,今天在逛原来的网站时,又发现了这个项目。一段简单的代码,就能实现"旋转小人"的效果,现在分享给大家。
效果展示
效果图有点拉胯,将就看吧。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转小人 刘郎阁</title>
</head>
<body style="background-color: black; color: white;">
<div class="twopeople">
<div class="container" style="height:200px;">
<canvas class="illo" width="800" height="800" style="max-width: 200px; max-height: 200px; touch-action: none; width: 640px; height: 640px;"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/twopeople1.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/zdog.dist.js"></script>
<script id="rendered-js" src="https://cdn.jsdelivr.net/gh/Justlovesmile/CDN/js/twopeople.js"></script>
<style>
.twopeople{
margin: 0;
align-items: center;
justify-content: center;
text-align: center;
}
canvas {
display: block;
margin: 0 auto;
cursor: move;
}
</style>
</div>
</body>
</html>
这个旋转小人第一次是在某个主题文档见过。现在仔细看看图片内容,原来它一款我正在玩的游戏《celeste》相关😲,而不是简单的'two people'
游戏动画吗?
是根据游戏角色和游戏内道具为元素另外构思创作的作品。感觉挺不错的。
可以 👍 这么细心
非常nice,加到我的文章里面很好看https://www.xiaohanwu.com/notes/14
只要用对地方怎么都不错😎
请教一下怎么让它在拖动之后继续保持旋转?好像拖一下就停了(笑哭
试试添加Js代码监听,让它被拖动以后,继续保持动态运动
不错,很棒的设计,虽然基本没用。
确实是的
又水了一篇😂
🤫又被你发现了…
不错,这个可以用手拖动吗?就是带交互的那种
可以的