css实现出牌的效果

最新推荐文章于 2023-08-29 14:53:42 发布
最新推荐文章于 2023-08-29 14:53:42 发布
阅读量1k 收藏
点赞数 1
分类专栏： 前端技术
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/newger/article/details/8714188
版权 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Pokers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="./css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: #f5f5f5;
      }

      .form-signin {
        max-width: 300px;
        padding: 19px 29px 29px;
        margin: 0 auto 20px;
        background-color: #fff;
        border: 1px solid #e5e5e5;
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
                border-radius: 5px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
                box-shadow: 0 1px 2px rgba(0,0,0,.05);
      }
      .form-signin .form-signin-heading,
      .form-signin .checkbox {
        margin-bottom: 10px;
      }
      .form-signin input[type="text"],
      .form-signin input[type="password"] {
        font-size: 16px;
        height: auto;
        margin-bottom: 15px;
        padding: 7px 9px;
      }
      .poker{
          position: absolute;
          zoom:0.5;
          #background-size:cover;
      }
    </style>
    <link href="./css/bootstrap-responsive.css" rel="stylesheet">

  </head>

  <body>
    <!--img id="fmrlose" src="./img/playCard.png" style="display:block;" /--> 
    <div class="poker" id = "div" style="background-image:url(./img/playCard.png); top:0px; left:0px; width:112px; height:171px;"></div>
    <div class="poker" id = 'div2' style="background-image:url(./img/playCard.png); width:112px; height:171px; background-position: 224px 0px; top:0px;left:40px;"></div>
	<div></div>
  </body>
  <script>
      var gflag = false;
      var div2 = document.getElementById('div');
	  div2.addEventListener('touchend', function(){
	    move();
	  })

      function move(){
	    var val = parseInt(document.getElementById('div').style.top);
	    if(!gflag){
		  val -= 12;
	      document.getElementById('div').style.top = val+'px';
		  gflag = true;
		}else{
		  val += 12;
		  document.getElementById('div').style.top = val+'px';
		  gflag = false;
		}
	  }
  </script>
</html>

newger
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS实现扑克牌效果
09-05
纯CSS实现扑克牌效果，太牛了吧？开始我还以为是一张图片呢，后来发现代码里没有调用任何图片，顿时有点诧异，CSS果然很牛，或是作者水平比较牛？
js发牌特效
03-15
js发牌特效
HTML5 Canvas扑克牌花式发牌动画特效.zip
07-11
这是一款风格很个性的HTML5 Canvas扑克牌花式发牌动画特效，html5卡片展示动画代码。
css门店招牌效果
weixin_42519890的博客
07-23 232
效果如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .title { position: relative; text-align: center; width: 380px; height: 55px; backgr
怎么用css模拟发牌动作,JS实现纸牌发牌动画
weixin_39851914的博客
08-03 609
本文实例为大家分享了JS实现纸牌发牌动画的具体代码，供大家参考，具体内容如下先看演示 游戏构建准备1.准备52张纸牌2.一张桌布3.编辑工具为 Visual Code技术概要1.对象操作2.数据操作3.JS animation动画4.全局变量function desen_x(){let that = this;var desen=["h_1","h_2","h_3","h_4","h_5","h...
css3扑克牌展开折叠动画特效
06-11
在扑克牌动画中，可能使用`rotate()`、`scale()`等函数来实现卡片的翻转和放大缩小效果。 2. **CSS3过渡（Transitions）**：当一个CSS属性值发生变化时，过渡属性可以使这一变化过程平滑地进行。例如，通过设置`...
CSS3实现3D图片翻转洗牌特效特效代码
03-20
5. **洗牌效果**：洗牌特效通常涉及到多个元素的顺序改变，这可以通过JavaScript来实现。结合CSS3的动画，可以创建出类似洗牌过程中元素随机排列的效果。 6. **代码实现**：在提供的文件列表中，可能包含了一个示例...
CSS实现类似条状统计表效果的方法
09-25
通过CSS（层叠样式表），我们可以轻松地实现类似条状统计表的效果，来展示各种数据，如市场份额、比例或其他需要比较的数值。在本教程中，我们将深入探讨如何使用CSS来创建这样的效果，同时也会涉及网页颜色和样式的...
纯CSS3按钮3D效果
06-24
下面我们将详细探讨如何通过CSS3实现这种效果。 首先，我们需要理解CSS3中的关键属性和技术。3D效果主要依赖于`transform`属性，它允许我们对元素进行旋转、缩放、平移等操作，其中`perspective`属性用于设置3D空间...
CSS3扑克牌悬停翻转特效
07-24
这个特效是通过CSS3的`transform`属性实现的，它允许我们对网页元素进行平移、旋转、缩放和倾斜等操作，从而创造出动态的视觉效果。 首先，让我们了解CSS3中的`transform`属性。`transform`允许我们在不改变文档流...
HTML5 Canvas扑克牌花式发牌动画特效
06-12
这是一款风格很个性的HTML5 Canvas扑克牌花式发牌动画特效，html5卡片展示动画代码。
jquery+css3 HTML5图片洗牌切换动画特效
05-26
图片洗牌切换动画特效，很漂亮的HTML5图片过渡效果。
ios应用源码之发一个模拟扑克 开局和出牌的动画效果 pocker_fortest 2018127
12-07
ios应用源码之发一个模拟扑克 开局和出牌的动画效果 pocker_fortest
怎么用css模拟发牌动作,CSS3 展翅（飞行）动作模拟
weixin_39625747的博客
08-03 256
CSS语言：CSSSCSS确定html,body {margin: 0;background: #191919;}#container {position: absolute;margin: auto;top: 0;bottom: 0;left: 0;right: 0;background: white;width: 0px;height: 0px;animation: moveY 2.5s ea...
纯css实现翻牌特效
weixin_34233421的博客
05-05 240
大家有没有看到过网上很炫的翻牌效果，牌正面对着我们，然后点击一下，牌就被翻过来了，效果很酷炫，是不是很想知道是怎么实现的么，代码很简单，跟着小编往下走。先给大家介绍一下翻牌的原理：1、父容器设置设置perspective，让其子元素支持3d透视。注：perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素...
css-实现卡牌的发牌和翻转动画
m0_53206841的博客
11-24 4738
打开抽卡界面，卡牌出现并发牌至固定的位置，此时展示的是卡牌的背面；用户点击卡牌时，卡牌进行翻转，并展示卡牌内容，或者发牌后自动进行翻转和展示。本实例在页面挂载后自动播放动画，若需点击后再播放，只需将事件写入click事件当中即可。卡牌样式可根据具体需求设置。
VUE环境下 CSS3+JS 实现发牌 翻牌
悟空—
08-29 1217
1.通过变量show来控制 添加 'popup-top-box-card' + index 给牌Class 改变position top left 实现发牌动作 rotateY(180deg) 实现翻牌动作。2.通过变量show来控制卡牌子级 添加 ‘popup-box-card-son-rotate’ opacity 延迟0.05s显示0.2s卡牌内容。1.父级（卡牌未放开显示背景） 卡牌子级（显示卡牌内容）
JS实现简单斗地主效果
weixin_30877227的博客
04-28 1261
let play = document.querySelectorAll(".play"); let dizhupai = document.getElementById("dizhupai"); function creatPoker(){ let paidui = []; let color = ["黑桃", "红桃", "梅花", "方块"]; le...
css3 模拟标牌震荡效果
chenglie6973的博客
02-10 203
效果如下：当第一次出现在视野中时，震动一次 css3 模拟标牌震荡效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Co...
html5+css实现发牌动画
最新发布
05-16
HTML5和CSS可以实现很多有趣的动画效果，比如发牌动画。实现发牌动画的主要步骤如下： 1. 首先需要准备好扑克牌的图像，可以使用PNG、JPEG等格式的图片。 2. 在HTML中创建一个包含扑克牌图像的元素，并设置它的初始位置和大小。 3. 使用CSS3的@keyframes规则定义动画的关键帧，即扑克牌从发牌者手中飞出，到最终落在玩家手中的过程。 4. 将定义好的@keyframes规则应用到元素上，同时设置动画的持续时间、延迟时间、重复次数等属性。 5. 最后使用JavaScript控制动画的触发时机，比如点击“发牌”按钮时触发动画。 以下是一个简单的发牌动画实现代码示例： HTML: ``` <div class="card"></div> <button onclick="dealCards()">发牌</button> ``` CSS: ``` .card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 150px; background-image: url('card.png'); background-size: cover; } @keyframes deal { 0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); } 50% { transform: translate(-50%, -150%) rotate(180deg) scale(0.5); } 100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); } } ``` JavaScript: ``` function dealCards() { var card = document.querySelector('.card'); card.style.animation = 'deal 1s ease-out'; } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值