html5超炫魔术扑克牌动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 html5超炫魔术扑克牌动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html5超炫魔术扑克牌动画特效</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <link href="css/example.css" rel="stylesheet">
</head>
<body>
    <article class="zzsc-container">
        <div id="container"></div>
        <div id="topbar"></div>
    </article>
    <script src="dist/deck.js"></script>
    <script src="js/example.js"></script>
</body>
</html>

JS代码(example.js):

var easing = Deck.easingvar prefix = Deck.prefixvar transform = prefix('transform')var transition = prefix('transition')var transitionDelay = prefix('transitionDelay')var boxShadow = prefix('boxShadow')var translate = Deck.translatevar $container = document.getElementById('container')var $topbar = document.getElementById('topbar')var $sort = document.createElement('button')var $shuffle = document.createElement('button')var $bysuit = document.createElement('button')var $fan = document.createElement('button')var $poker = document.createElement('button')$shuffle.textContent = 'Shuffle'$sort.textContent = 'Sort'$bysuit.textContent = 'By suit'$fan.textContent = 'Fan'$poker.textContent = 'Poker'$topbar.appendChild($shuffle)$topbar.appendChild($sort)$topbar.appendChild($bysuit)$topbar.appendChild($fan)$topbar.appendChild($poker)var deck = Deck()// easter eggs startvar acesClicked = []var kingsClicked = []deck.cards.forEach(function (card,i){
	card.enableMoving() card.$el.addEventListener('mousedown',onTouch) card.$el.addEventListener('touchstart',onTouch) function onTouch (){
	var card if (i % 13 === 0){
	acesClicked[i] = true if (acesClicked.filter(function (ace){
	return ace}
).length === 4){
	document.body.removeChild($topbar) deck.$el.style.display = 'none' setTimeout(function (){
	startWinning()}
,250)}
}
else if (i % 13 === 12){
	if (!kingsClicked){
	return}
kingsClicked[i] = true if (kingsClicked.filter(function (king){
	return king}
).length === 4){
	for (var j = 0;
	j < 3;
	j++){
	card = Deck.Card(52 + j) card.mount(deck.$el) card.$el.style[transform] = 'scale(0)' card.enableMoving() deck.cards.push(card)}
deck.sort(true) kingsClicked = false}
}
else{
	acesClicked = [] kingsClicked = []}
}
}
)function startWinning (){
	var $winningDeck = document.createElement('div') $winningDeck.classList.add('deck') $winningDeck.style[transform] = translate(Math.random() * window.innerWidth - window.innerWidth / 2 + 'px',Math.random() * window.innerHeight - window.innerHeight / 2 + 'px') $container.appendChild($winningDeck) for (var i = 0;
	i < 52;
	i++){
	addWinningCard($winningDeck,i)}
setTimeout(startWinning,500)}
function addWinningCard ($deck,i){
	var card = Deck.Card(i) var delay = (52 - i) * 20 var $xMovement = document.createElement('div') $xMovement.style.position = 'absolute' $xMovement.style[transform] = translate(0,0) card.$el.style[boxShadow] = 'none' card.mount($xMovement) $deck.appendChild($xMovement) card.$el.style[transform] = translate(0,0) setTimeout(function (){
	$xMovement.style[transition] = 'all 1s linear' $xMovement.style[transitionDelay] = delay / 1000 + 's' card.$el.style[transition] = 'all 1s ' + easing('cubicInOut') card.$el.style[transitionDelay] = delay / 1000 + 's' $xMovement.style[transform] = translate('-500px',0) card.$el.style[transform] = translate(0,'500px')}
,0) setTimeout(function (){
	card.unmount()}
,1000 + delay)}
// easter eggs end$shuffle.addEventListener('click',function (){
	deck.shuffle() deck.shuffle()}
)$sort.addEventListener('click',function (){
	deck.sort()}
)$bysuit.addEventListener('click',function (){
	deck.sort(true) // sort reversed deck.bysuit()}
)$fan.addEventListener('click',function (){
	deck.fan()}
)$poker.addEventListener('click',function (){
	deck.shuffle() deck.shuffle() deck.shuffle() deck.poker()}
)deck.mount($container)deck.intro()deck.sort()// secret message..var randomDelay = 10000 + 60000 * Math.random()setTimeout(function (){
	printMessage('Psst..I want to share a secret with you...')}
,randomDelay)setTimeout(function (){
	printMessage('...try clicking all kings and nothing in between...')}
,randomDelay + 5000)setTimeout(function (){
	printMessage('...have fun;
	)')}
,randomDelay + 10000)function printMessage (text){
	var $message = document.createElement('p') $message.classList.add('message') $message.textContent = text document.body.appendChild($message) $message.style[transform] = translate(window.innerWidth + 'px',0) setTimeout(function (){
	$message.style[transition] = 'all .7s ' + easing('cubicInOut') $message.style[transform] = translate(0,0)}
,1000) setTimeout(function (){
	$message.style[transform] = translate(-window.innerWidth + 'px',0)}
,6000) setTimeout(function (){
	document.body.removeChild($message)}
,7000)}

CSS代码(default.css):

@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?rretjt');src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),url('../fonts/icomoon.woff?rretjt') format('woff'),url('../fonts/icomoon.ttf?rretjt') format('truetype'),url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#f9f7f6;color:#404d5b;font-weight:500;font-size:1.05em;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
.zzsc-container{margin:0 auto;text-align:center;overflow:hidden;}
.zzsc-content{font-size:150%;padding:1em 0;}
.zzsc-content h2{margin:0 0 2em;opacity:0.1;}
.zzsc-content p{margin:1em 0;padding:5em 0 0 0;font-size:0.65em;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3498DB;color:#fff;}
/*light blue*/
/* Header */
.zzsc-header{padding:3.5em 190px 1em;letter-spacing:-1px;text-align:center;}
.zzsc-header h1{font-weight:600;font-size:2em;line-height:1;margin-bottom:0;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.zzsc-header h1 span{font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
/*nav*/
.zzsc-demo a{color:#1d7db1;text-decoration:none;}
.zzsc-demo{width:100%;padding-bottom:1.2em;}
.zzsc-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #1d7db1;font-weight:700;}
.zzsc-demo a:hover{opacity:0.6;}
.zzsc-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.zzsc-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.zzsc-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.zzsc-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;color:#fff;}
.zzsc-icon span{display:none;}
.zzsc-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.zzsc-footer{width:100%;padding-top:10px;}
.zzsc-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{color:#fff;background:#333;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related h3{font-family:"Microsoft YaHei",sans-serif;}
.related a h3{font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-zzsc-home-outline:before{content:"\e5000";}
.icon-zzsc-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:50em){.zzsc-header{padding:3em 10% 4em;}
.zzsc-header h1{font-size:2em;}
}
@media screen and (max-width:40em){.zzsc-header h1{font-size:1.5em;}
}
@media screen and (max-width:30em){.zzsc-header h1{font-size:1.2em;}
}

CSS代码(example.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;font-size:100%;vertical-align:baseline}
body{line-height:1;color:#000;background:#fff}
ol,ul{list-style:none}
table{border-collapse:separate;border-spacing:0;vertical-align:middle}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
a img{border:none}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html,body{height:100%}
body{background-color:#45a176;color:#333;font-family:'Open Sans',sans-serif;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}
#container{position:absolute;top:calc(50% + 1.5rem);left:50%;-webkit-transform:translate3d(-50%,-50%,0);-moz-transform:translate3d(-50%,-50%,0);-o-transform:translate3d(-50%,-50%,0);-ms-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0)}
#topbar{position:fixed;top:0;left:0;width:100%;background-color:#265941;padding:.25rem;text-align:center;}
#topbar button{background:none;border:1px solid #fff;outline:none;margin:.25rem;padding:.5rem;font:inherit;font-size:.875rem;color:#fff;cursor:pointer;}
#topbar button:hover{background-color:#fff;color:#444}
.message{position:fixed;bottom:0;left:0;width:100%;padding:1rem .5rem;font-size:.5rem;text-align:center}
.card{position:absolute;display:inline-block;left:-1.9375rem;top:-2.75rem;width:3.875rem;height:5.5rem;background-color:#fff;-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.15);box-shadow:0 1px 1px rgba(0,0,0,0.15);cursor:default;}
.card .topleft,.card .bottomright{position:absolute;font-size:.7rem;text-align:center;line-height:1;letter-spacing:-.1rem;font-family:'Ubuntu Condensed',sans-serif;white-space:pre}
.card .topleft{top:.25rem;left:.25rem;-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-o-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0)}
.card .bottomright{bottom:.25rem;right:.25rem;-webkit-transform:rotate(180deg) translate(-50%,0);-moz-transform:rotate(180deg) translate(-50%,0);-o-transform:rotate(180deg) translate(-50%,0);-ms-transform:rotate(180deg) translate(-50%,0);transform:rotate(180deg) translate(-50%,0)}
.card .face{height:100%;background-position:50% 50%;-webkit-background-size:100% 100%;-moz-background-size:100% 100%;background-size:100% 100%;background-repeat:no-repeat}
.card.joker .topleft,.card.joker .bottomright{font-size:.4rem}
.card.spades,.card.clubs,.card.joker{color:#000}
.card.hearts,.card.diamonds{color:#f00}
.card.spades1 .face{background-image:url("faces/0_1.svg")}
.card.spades2 .face{background-image:url("faces/0_2.svg")}
.card.spades3 .face{background-image:url("faces/0_3.svg")}
.card.spades4 .face{background-image:url("faces/0_4.svg")}
.card.spades5 .face{background-image:url("faces/0_5.svg")}
.card.spades6 .face{background-image:url("faces/0_6.svg")}
.card.spades7 .face{background-image:url("faces/0_7.svg")}
.card.spades8 .face{background-image:url("faces/0_8.svg")}
.card.spades9 .face{background-image:url("faces/0_9.svg")}
.card.spades10 .face{background-image:url("faces/0_10.svg")}
.card.spades11 .face{background-image:url("faces/0_11.svg")}
.card.spades12 .face{background-image:url("faces/0_12.svg")}
.card.spades13 .face{background-image:url("faces/0_13.svg")}
.card.hearts1 .face{background-image:url("faces/1_1.svg")}
.card.hearts2 .face{background-image:url("faces/1_2.svg")}
.card.hearts3 .face{background-image:url("faces/1_3.svg")}
.card.hearts4 .face{background-image:url("faces/1_4.svg")}
.card.hearts5 .face{background-image:url("faces/1_5.svg")}
.card.hearts6 .face{background-image:url("faces/1_6.svg")}
.card.hearts7 .face{background-image:url("faces/1_7.svg")}
.card.hearts8 .face{background-image:url("faces/1_8.svg")}
.card.hearts9 .face{background-image:url("faces/1_9.svg")}
.card.hearts10 .face{background-image:url("faces/1_10.svg")}
.card.hearts11 .face{background-image:url("faces/1_11.svg")}
.card.hearts12 .face{background-image:url("faces/1_12.svg")}
.card.hearts13 .face{background-image:url("faces/1_13.svg")}
.card.clubs1 .face{background-image:url("faces/2_1.svg")}
.card.clubs2 .face{background-image:url("faces/2_2.svg")}
.card.clubs3 .face{background-image:url("faces/2_3.svg")}
.card.clubs4 .face{background-image:url("faces/2_4.svg")}
.card.clubs5 .face{background-image:url("faces/2_5.svg")}
.card.clubs6 .face{background-image:url("faces/2_6.svg")}
.card.clubs7 .face{background-image:url("faces/2_7.svg")}
.card.clubs8 .face{background-image:url("faces/2_8.svg")}
.card.clubs9 .face{background-image:url("faces/2_9.svg")}
.card.clubs10 .face{background-image:url("faces/2_10.svg")}
.card.clubs11 .face{background-image:url("faces/2_11.svg")}
.card.clubs12 .face{background-image:url("faces/2_12.svg")}
.card.clubs13 .face{background-image:url("faces/2_13.svg")}
.card.diamonds1 .face{background-image:url("faces/3_1.svg")}
.card.diamonds2 .face{background-image:url("faces/3_2.svg")}
.card.diamonds3 .face{background-image:url("faces/3_3.svg")}
.card.diamonds4 .face{background-image:url("faces/3_4.svg")}
.card.diamonds5 .face{background-image:url("faces/3_5.svg")}
.card.diamonds6 .face{background-image:url("faces/3_6.svg")}
.card.diamonds7 .face{background-image:url("faces/3_7.svg")}
.card.diamonds8 .face{background-image:url("faces/3_8.svg")}
.card.diamonds9 .face{background-image:url("faces/3_9.svg")}
.card.diamonds10 .face{background-image:url("faces/3_10.svg")}
.card.diamonds11 .face{background-image:url("faces/3_11.svg")}
.card.diamonds12 .face{background-image:url("faces/3_12.svg")}
.card.diamonds13 .face{background-image:url("faces/3_13.svg")}
.card.joker1 .face{background-image:url("faces/4_1.svg")}
.card.joker2 .face{background-image:url("faces/4_2.svg")}
.card.joker3 .face{background-image:url("faces/4_3.svg")}
@media (max-width:540px){#topbar{text-align:left}
.gh-ribbon{-webkit-transform:scale(.5);-moz-transform:scale(.5);-o-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-o-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}
}
@media (min-width:800px){html{font-size:125%}
}

附件:下载该文件资源,减少时间成本(增值服务)