首页 jquery案例 正文
jQuery css3扑克洗牌和扑克牌翻转效果代码

 2023-12-01    71  

           效果图：
1.gif

扑克发牌效果图是通过给每一个扑克 通过在css中设置好对应的位置 然后在js里面通过each遍历以及setTimeout来进行给对应的扑克设置

不同的延时

html：

给每一个的扑克东设置正反俩个面 当鼠标移入时 进行翻转

    <div id="projects">
      <div class="grid">
        <div class="projects">
          <div class="project">
            <div class="mask">
              <div class="back"></div>
              <div class="front"></div>
            </div>
          </div>
          <div class="project">
            <div class="mask">
              <div class="back"></div>
              <div class="front"></div>
            </div>
          </div>
          <div class="project">
            <div class="mask">
              <div class="back"></div>
              <div class="front"></div>
            </div>
          </div>
          <div class="project">
            <div class="mask">
              <div class="back"></div>
              <div class="front"></div>
            </div>
          </div>
          <div class="project">
            <div class="mask">
              <div class="back"></div>
              <div class="front"></div>
            </div>
          </div>
          <div class="project">
            <div class="mask">
              <div class="back"></div>
              <div class="front"></div>
            </div>
          </div>
          <div class="project">
            <div class="mask">
              <div class="back"></div>
              <div class="front"></div>
            </div>
          </div>
          <div class="project">
            <div class="mask">
              <div class="back"></div>
              <div class="front"></div>
            </div>
          </div>
          <div class="project">
            <div class="mask">
              <div class="back"></div>
              <div class="front"></div>
            </div>
          </div>
          <div class="controls">
            <span class="bottom"></span>
            <span class="bottom"></span>
            <span class="bottom"></span>
            <div class="mask"></div>
          </div>
        </div>
      </div>
    </div>

通过定位给扑克设置好 对应的位置

 .project.ani0 {
        right: 948px;
        bottom: 326px;
      }
      .project.ani1 {
        right: 711px;
        bottom: 326px;
      }
      .project.ani2 {
        right: 474px;
        bottom: 326px;
      }
      .project.ani3 {
        right: 237px;
        bottom: 326px;
      }

      .project.ani4 {
        right: 0;
        bottom: 326px;
      }

      .project.ani5 {
        right: 948px;
        bottom: 0;
      }
      .project.ani6 {
        right: 711px;
        bottom: 0;
      }
      .project.ani7 {
        right: 474px;
        bottom: 0;
      }
      .project.ani8 {
        right: 237px;
        bottom: 0;
      }

在js中我们设置俩个 匿名函数分别为 发牌和收牌 给所有的projce进行遍历 然后在内部进行setTimeoul设置 让它给item进行对应的ani类的添加

每次执行的时间等于当前index乘以 300 变现的延时

image.png

而收牌则是不进行定时器设置了 直接通过遍历统一移除对应的ani类

image.png

最后我们只要在点击主牌的时候 让它动态添加一个show 通过hasClass来进行检测并if判断 如果有则移除show 并调动收牌函数

如果没有则添加show 调动发牌函数

image.png

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>jQuery css3扑克洗牌和扑克牌翻转效果代码</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      #projects,
      #projects .grid {
        height: 100vh;
        box-sizing: border-box;
      }
      #projects {
        padding-top: 20px;
        background-color: #ef4036;
        overflow: hidden;
      }

      .project {
        position: absolute;
        right: 0;
        bottom: 0;
        margin: 0 0 15px 15px;
      }
      .project {
        float: left;
        width: 222px;
        height: 311px;
      }
      .grid {
        width: 1170px;
        margin: 0 auto;
        position: relative;
      }
      div.projects {
        height: 652px;
      }
      div.projects {
        float: left;
        width: 100%;
        position: relative;
        left: 0;
        top: 0;
      }
      div.projects .controls {
        position: absolute;
        right: 0;
        bottom: 15px;
      }
      div.projects .controls {
        float: left;
        width: 222px;
        height: 311px;
      }
      .controls .mask {
        float: left;
        position: relative;
        background: url(./img/project_card_bg.png) no-repeat;
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      div.projects .controls .bottom {
        transition: all 0.3s ease;
      }
      div.projects .controls .bottom {
        background: url(./img/project_card_bot_bg.png) no-repeat;
        position: absolute;
        bottom: -9px;
        right: 0;
        width: 222px;
        height: 66px;
      }

      div.projects .controls .bottom + .bottom + .bottom {
        bottom: -3px;
      }
      div.projects .controls .bottom + .bottom {
        bottom: -6px;
      }

      div.projects .controls:hover .bottom + .bottom + .bottom {
        bottom: -8px;
      }
      div.projects .controls:hover .bottom + .bottom {
        bottom: -14px;
      }
      div.projects .controls:hover .bottom {
        bottom: -20px;
      }

      .project.ani0 {
        right: 948px;
        bottom: 326px;
      }
      .project.ani1 {
        right: 711px;
        bottom: 326px;
      }
      .project.ani2 {
        right: 474px;
        bottom: 326px;
      }
      .project.ani3 {
        right: 237px;
        bottom: 326px;
      }

      .project.ani4 {
        right: 0;
        bottom: 326px;
      }

      .project.ani5 {
        right: 948px;
        bottom: 0;
      }
      .project.ani6 {
        right: 711px;
        bottom: 0;
      }
      .project.ani7 {
        right: 474px;
        bottom: 0;
      }
      .project.ani8 {
        right: 237px;
        bottom: 0;
      }

      .project .front {
        background: url(./img/project_front_bg.png) no-repeat;
        display: table;
      }
      .project .back,
      .project .front {
        box-sizing: border-box;
      }
      .project .back {
        background: url(./img/project_back_bg.png) no-repeat;
      }
      .project .back,
      .project .front {
        position: absolute;
        left: 0;
        top: 0;
        width: 222px;
        height: 311px;
        padding: 0 16px;
        text-align: center;
      }

      .project,
      .project .back,
      .project .front,
      .socials a,
      .transform_holder .back,
      .transform_holder .front,
      .transform_holder .transform {
        transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      }
      .project {
        perspective: 1000;
        transform: perspective(1000px);
        transform-style: preserve-3d;
      }
      .project .back,
      .project .front {
        backface-visibility: hidden;
        transform-style: preserve-3d;
      }

      .project .front {
        transform: rotateY(0deg);
      }
      .project .back {
        transform: rotateY(180deg);
      }
      .project.hover .front,
      .project:hover .front {
        transform: rotateY(180deg);
      }

      .project.hover .back,
      .project:hover .back {
        transform: rotateY(0deg);
      }
    </style>
  </head>
  <body>
    <div id="projects">
      <div class="grid">
        <div class="projects">
          <div class="project">
            <div class="mask">
              <div class="back"></div>
              <div class="front"></div>
            </div>
          </div>
          <div class="project">
            <div class="mask">
              <div class="back"></div>
              <div class="front"></div>
            </div>
          </div>
          <div class="project">
            <div class="mask">
              <div class="back"></div>
              <div class="front"></div>
            </div>
          </div>
          <div class="project">
            <div class="mask">
              <div class="back"></div>
              <div class="front"></div>
            </div>
          </div>
          <div class="project">
            <div class="mask">
              <div class="back"></div>
              <div class="front"></div>
            </div>
          </div>
          <div class="project">
            <div class="mask">
              <div class="back"></div>
              <div class="front"></div>
            </div>
          </div>
          <div class="project">
            <div class="mask">
              <div class="back"></div>
              <div class="front"></div>
            </div>
          </div>
          <div class="project">
            <div class="mask">
              <div class="back"></div>
              <div class="front"></div>
            </div>
          </div>
          <div class="project">
            <div class="mask">
              <div class="back"></div>
              <div class="front"></div>
            </div>
          </div>
          <div class="controls">
            <span class="bottom"></span>
            <span class="bottom"></span>
            <span class="bottom"></span>
            <div class="mask"></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
<script src="./js/jquery-2.1.4.js"></script>
<script>
  $(function () {
    $(".controls").click(function () {
      if ($(this).hasClass("show")) {
        $(this).removeClass("show");
        subMove();
      } else {
        $(this).addClass("show");
        addMove();
      }
    });
  });

  function addMove() {
    $(".project").each(function (index, item) {
      setTimeout(function () {
        $(item).addClass("ani" + index);
      }, index * 300);
    });
  }

  function subMove() {
    $(".project").each(function (index, item) {
      $(item).removeClass("ani" + index);
    });
  }
</script>


  •  标签：  

发表评论：

原文链接：http://1.15.94.33/?id=234

=========================================

http://1.15.94.33/ 为 “前端日记簿” 唯一官方服务平台，请勿相信其他任何渠道。

热门文章
热门标签
最新留言
友情链接

您的备案号皖ICP备2023021143号-1

本网站用于日常作责，学习记录，供大家使用参考

Copyright © 2012-2020，Powered By Z-Blog， Theme By zblog模板