请问 css+js 如何实现这种炉石传说卡片的晃动效果呢？让一个 div 充满生命的气息，哪位大佬能来个 demo(*@ο@*) 吗～ ？

2022-04-04 10:48:32 +08:00
 sciel

https://hs.blizzard.cn/gameguide/voyage-to-the-sunken-city

如果鼠标移动到 div 上面去就是炉石传说卡片那样的效果。离开的话，如果能让 div 稍微不规则的左右移动就好，有那种呼吸的感觉。

2532 次点击
所在节点    CSS
7 条回复
learnshare
2022-04-04 10:54:40 +08:00
search: css 3d card hover effect
sciel
2022-04-04 10:57:50 +08:00
@learnshare 谢谢！为你送上美丽的鲜花~
alphardex
2022-04-04 11:45:26 +08:00
这种 parallax 效果也可以用一个现成的轮子，是 swiper 的作者写的
https://atroposjs.com
ETiV
2022-04-04 12:23:46 +08:00
https://medium.com/@nashvail/recreating-the-apple-tv-icons-in-javascript-and-css-eec306d41617

如果你见过 AppleTV 的话就好搜了，这篇还讲解了怎么做
ccyu220
2022-04-04 12:34:20 +08:00
这个还是比较简单的，@keyframes 配合 transform 的 rotate 属性。如果要添加你描述的左右移动，再用 JS 加个随机的区间内 translateX 。
ccyu220
2022-04-04 12:35:42 +08:00
@ccyu220 我看错了，我还以为你说的是预购的卡片。
agdhole
2022-04-04 13:43:48 +08:00
js 能硬撸，检测鼠标轨迹来移动卡片方向

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/844850

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX