V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
sciel
V2EX  ›  CSS

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

  •  
  •   sciel · 2022-04-04 10:48:32 +08:00 · 2532 次点击
    这是一个创建于 963 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    7 条回复    2022-04-04 13:43:48 +08:00
    learnshare
        1
    learnshare  
       2022-04-04 10:54:40 +08:00   ❤️ 1
    search: css 3d card hover effect
    sciel
        2
    sciel  
    OP
       2022-04-04 10:57:50 +08:00
    @learnshare 谢谢!为你送上美丽的鲜花~
    alphardex
        3
    alphardex  
       2022-04-04 11:45:26 +08:00   ❤️ 3
    这种 parallax 效果也可以用一个现成的轮子,是 swiper 的作者写的
    https://atroposjs.com
    ETiV
        4
    ETiV  
       2022-04-04 12:23:46 +08:00   ❤️ 1
    https://medium.com/@nashvail/recreating-the-apple-tv-icons-in-javascript-and-css-eec306d41617

    如果你见过 AppleTV 的话就好搜了,这篇还讲解了怎么做
    ccyu220
        5
    ccyu220  
       2022-04-04 12:34:20 +08:00
    这个还是比较简单的,@keyframes 配合 transform 的 rotate 属性。如果要添加你描述的左右移动,再用 JS 加个随机的区间内 translateX 。
    ccyu220
        6
    ccyu220  
       2022-04-04 12:35:42 +08:00
    @ccyu220 我看错了,我还以为你说的是预购的卡片。
    agdhole
        7
    agdhole  
       2022-04-04 13:43:48 +08:00
    js 能硬撸,检测鼠标轨迹来移动卡片方向
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   927 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 20:36 · PVG 04:36 · LAX 12:36 · JFK 15:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.