css3 翻转特效实例翻扑克

扑克实例特效 2023-01-31 06:01:24 219人浏览泡泡鱼

Python 官方文档：入门教程 => 点击学习

摘要

实现点击扑克翻转动画点击其他扑克自动翻回反面不浪费时间直接上代码<!doctype html> <html> <head> <meta charset="utf-

QQ截图20130604103124.jpg

实现点击扑克翻转动画点击其他扑克自动翻回反面

不浪费时间直接上代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>翻扑克</title>
<link rel="stylesheet" href="animate.CSS" type="text/css" />
<script type="text/javascript" src="Jquery-1.8.3.min.js"></script>
<style type="text/css">
.box {
    width: 355px;
    height: 500px;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-left: 10px;
    position: relative;
}
.list {
    position: absolute;
}
li {
    float:left;
    list-style:none;
}
</style>
<script>
$(function(){
// 上一个扑克  扑克正面  扑克背面
var old;
var pBack = "Http://p_w_picpath.zhangxinxu.com/p_w_picpath/blog/201210/puke-back.png";
var pFront = "http://p_w_picpath.zhangxinxu.com/p_w_picpath/blog/201210/puke-k.png";
    $(".box").bind("click", function() {
                              
        if(old == null){
            old =  this;
        }else if(old != null  && old != this){
            mRotate($(old));
            old = this;
        }else{
            old = null;
        }
        var self = $(this);
        mRotate(self);
                              
});
function mRotate(self){
        self.find(".list").addClass("out").removeClass("in");
        setTimeout(function() {
            if(self.find(".list").find("img").attr("src") == pBack ){
                self.find(".list").find("img").attr("src",pFront);
            }else{
                self.find(".list").find("img").attr("src",pBack);
                }
            self.find(".list").addClass("in").removeClass("out");
        }, 225);
    }
    return;
                          
})
</script>
</head>
<body>
<ul>
<li>
<div class="box viewport-flip" title="点击翻面">
    <a href="#" class="list flip"><img src="http://p_w_picpath.zhangxinxu.com/p_w_picpath/blog/201210/puke-back.png" alt="纸牌背面" /></a>
</div>
</li>
<li>
<div class="box viewport-flip" title="点击翻面">
    <a href="#" class="list flip"><img src="http://p_w_picpath.zhangxinxu.com/p_w_picpath/blog/201210/puke-back.png" alt="纸牌背面" /></a>
</div>
</li>
<li>
<div class="box viewport-flip" title="点击翻面">
    <a href="#" class="list flip"><img src="http://p_w_picpath.zhangxinxu.com/p_w_picpath/blog/201210/puke-back.png" alt="纸牌背面" /></a>
</div>
</li>
<li>
<div class="box viewport-flip" title="点击翻面">
    <a href="#" class="list flip"><img src="http://p_w_picpath.zhangxinxu.com/p_w_picpath/blog/201210/puke-back.png" alt="纸牌背面" /></a>
</div>
</li>
<li>
<div class="box viewport-flip" title="点击翻面">
    <a href="#" class="list flip"><img src="http://p_w_picpath.zhangxinxu.com/p_w_picpath/blog/201210/puke-back.png" alt="纸牌背面" /></a>
</div>
</li>
</ul>
</body>
</html>

这个实例是根据 WEB上渐进使用jQuery Mobile中animate相关CSS 这篇文章其中一个例子修改而来不太懂的可以先看一下这篇文章

实例下载地址: 我是实例

您可能感兴趣的文档:

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: css3 翻转特效实例翻扑克

本文链接: https://www.lsjlt.com/news/190057.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

css3 翻转特效实例翻扑克

实现点击扑克翻转动画点击其他扑克自动翻回反面不浪费时间直接上代码<!doctype html> <html> <head> <meta charset="utf-...

99+

2023-01-31

扑克实例特效
android实现扑克卡片翻转

今天看见一个Android 扑克卡片翻转效果的帖子，于是手痒想学一学，由于接触过的Animation动画等比较少，所以感觉很新奇。首先，说一下布局，是FrameLayout,...

99+

2022-06-07

Android
android如何实现扑克卡片翻转

这篇文章主要介绍了android如何实现扑克卡片翻转的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇android如何实现扑克卡片翻转文章都会有所收获，下面我们一起来看看吧。还需额外注意一点：这是刚刚才发现的问题...

99+

2023-06-30
css3图片翻转特效怎么实现

本篇内容介绍了“css3图片翻转特效怎么实现”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ ...

99+

2022-10-19
css3如何3D色子翻转特效

这篇文章主要讲解了“css3如何3D色子翻转特效”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css3如何3D色子翻转特效”吧！第一步，首先进行HTML的布...

99+

2022-10-19
css3怎么实现3D色子翻转特效

本篇内容主要讲解“css3怎么实现3D色子翻转特效”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“css3怎么实现3D色子翻转特效”吧!css3使我们能够跳出2d...

99+

2022-10-19
css3怎么实现翻转效果

这篇文章将为大家详细讲解有关css3怎么实现翻转效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。css3实现翻转效果的方法：1、将外层元素设置perspective；2、将第二包裹层翻转180度，同时设...

99+

2023-06-14
css3怎么实现麻将筛子3D翻转特效

这篇文章主要介绍“css3怎么实现麻将筛子3D翻转特效”，在日常操作中，相信很多人在css3怎么实现麻将筛子3D翻转特效问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css3...

99+

2022-10-19
css3如何实现3d翻转效果

今天小编给大家分享的是css3如何实现3d翻转效果，相信很多人都不太了解，为了让大家更加了解，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计...

99+

2023-06-14
怎么用css3实现麻将筛子3D翻转特效

这篇文章主要介绍“怎么用css3实现麻将筛子3D翻转特效”，在日常操作中，相信很多人在怎么用css3实现麻将筛子3D翻转特效问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么...

99+

2022-10-19
css3如何实现立体翻转效果

今天给大家介绍一下css3如何实现立体翻转效果。文章的内容小编觉得不错，现在给大家分享一下，觉得有需要的朋友可以了解一下，希望对大家有所帮助，下面跟着小编的思路一起来阅读吧。在css3中，可以利用trans...

99+

2022-10-19
css3如何实现垂直翻转效果

这篇文章主要介绍“css3如何实现垂直翻转效果”，在日常操作中，相信很多人在css3如何实现垂直翻转效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css3如何实现垂直翻转...

99+

2022-10-19
css3如何实现翻转2次效果

这篇文章给大家分享的是有关css3如何实现翻转2次效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。方法：1、用“@keyframes 名称{100...

99+

2022-10-19
css3如何实现卡片翻转效果

本文小编为大家详细介绍“css3如何实现卡片翻转效果”，内容详细，步骤清晰，细节处理妥当，希望这篇“css3如何实现卡片翻转效果”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 ...

99+

2022-10-19
css3中怎么实现图片翻牌特效

这篇文章给大家介绍css3中怎么实现图片翻牌特效，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。代码如下:<!doctype html><html><hea...

99+

2022-10-19
如何使用css3实现图片翻牌特效

这篇文章主要介绍了如何使用css3实现图片翻牌特效，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。代码如下:<!doctype html...

99+

2022-10-19
css3中怎么实现图形3d翻转效果

css3中怎么实现图形3d翻转效果，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。<!DOCTYPE html&...

99+

2022-10-19
利用Vue实现卡牌翻转的特效

目录前言实现鼠标移入选中效果卡片翻转效果完整代码结语前言今天是正月初九，也是活动的倒数第二天，复工都三天了，而我三篇春节文章还没写完，实在是太混了！这次带来的是一个春节抽福卡页面，...

99+

2022-11-13
使用CSS3怎么实现一个3D翻转效果

本篇文章给大家分享的是有关使用CSS3怎么实现一个3D翻转效果，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。第一步非常简单，我们简单画1个演示方块，为其添加transitio...

99+

2023-06-08
css3代码如何实现图形3d翻转效果

这篇“css3代码如何实现图形3d翻转效果”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“css3代码如何实现图形3d翻转效果...

99+

2023-07-04