javascript - 如何在 css 和/或 javascript 中制作老虎机文本效果?

标签 javascript css

<分区>


想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post .

关闭 6 年前

我有一个我创建的横幅,我想用很多机器效果制作动画:http://codepen.io/abek/pen/rLAmwr

哪些 JS 工具或 CSS 技术可以帮助创建这种效果?

  <div class="select-a-game ">
    <ul class="select-a-game-name text-center">
      <li class="sagn-dark-blue">S</li>
      <li class="sagn-dark-grey">E</li>
      <li class="sagn-orange">L</li>
      <li class="sagn-red">E</li>
      <li class="sagn-grey">C</li>
      <li class="sagn-dark-blue">T</li>
      <li class="sagn-black">A</li>
      <li class="sagn-dark-grey">G</li>
      <li class="sagn-dark-blue">A</li>
      <li class="sagn-grey">M</li>
      <li class="sagn-red">E</li>
    </ul>
  </div>

最佳答案

我们开始吧,这是这里的重要部分,JS 函数。

$('li').click(function(event){
$( event.target ).css({ perspective: 200, rotateY: 240 });
});

这取决于 jQuery 和 jq 转换库。

这只是一个演示,您可以玩弄数字。您没有说明是否希望它们按顺序触发,我只是做了最简单的实现,点击时调用函数。

密码本

http://codepen.io/damianocel/pen/LkByag

关于javascript - 如何在 css 和/或 javascript 中制作老虎机文本效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38667255/

上一篇:html - 随着浏览器尺寸变小,导航选项卡无法正确对齐

下一篇:javascript - 声明内联样式与类时的行为变化

相关文章:

javascript - 居中对齐叠加层

javascript - 大数据的 D3 性能(需要反馈)

javascript - Underscore.js .filter() 和 .any()

javascript - dojo.fadeOut 多个节点?

javascript - 从 ui-bootstrap 覆盖一个函数

javascript - 在javascript中对PCM音频缓冲区进行下采样

html - 将 flexbox 元素与 flex-grow 元素对齐

html - CSS 悬停显示 anchor

php - "stretch"的 Wordpress 特定方法,(最小高度)等我的页面内容,以便我的页脚后没有空格?

jquery下拉菜单边框问题