他们经历了各种讨论、不断尝试、一遍又一遍……最终把作品做成了如下模样：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"content="IE=Edge">
<meta name="author" content="Reddy.Huang,i@0u0b.com"/>
<base href="http://cool.miaov.com/170309/card/">
<title>妙味课堂-JS中级课程小组练习-卡牌</title>
<link rel="stylesheet" href="./src/css/reset.css">
<link rel="stylesheet"href="./src/css/main.css">
<link rel="stylesheet"href="./src/css/font-awesome.min.css">
</head>
<body>
<div>
<img src="./src/img/common/main-bg.jpg"alt="bg-normal" style="display: none;">
<img src="./src/img/common/background_night.png"alt="bg-gacha" style="display: none;">
<img src="./src/img/common/game1.jpg"alt="bg-game1" style="display: none;">
<canvas id="dot"style="background:linear-gradient(to bottom, #9cc2c9, #8468b8);">
<p>your browser not support canvas</p>
</canvas>
</div>
<div>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<p>加载中</p>
</div>
<nav>
<ul>
<li><ahref="javascript:;"><i></i>首页</a></li>
<li><a href="javascript:;"><i></i>卡牌展开折叠效果</a></li>
<li><a href="javascript:;"><i></i>模拟抽卡</a></li>
<li><a href="javascript:;"><i></i>简易卡牌对战游戏</a></li>
<li><a href="javascript:;"><i></i>翻转消除游戏</a></li>
</ul>
</nav>
<a href="javascript:;"id="return-main-nav"><i class="fa fa-arrow-left"></i></a>
<section id="section0">
<div>
<h1>卡牌动效展示页</h1>
</div>
</section>
<section id="section1">
<div id="click-navigation">
<spanonclick="cm.transform2d(cm.right)">right</span>
<spanonclick="cm.transform2d(cm.left)">left</span>
<spanonclick="cm.transform2d(cm.horizontalSpread)">horizontalSpread</span>
<spanonclick="cm.transform2d(cm.rightSpread)">rightSpread</span>
<spanonclick="cm.transform2d(cm.leftSpread)">leftSpread</span>
<span onclick="cm.transform2d(cm.rotate330)">rotate330</span>
<spanonclick="cm.transform2d(cm.rotate360)">rotate360</span>
<spanonclick="cm.prevCard()"><</span>
<spanonclick="cm.nextCard()">></span>
<input type="text"name="" value=""placeholder="添加卡牌的张数"/>
<input type="button" name=""class="btn" value="添加" />
</div>
<ul id="card-container">
<li v-for="card in list"@mousedown.prevent @click="spread">
<em></em>
<img:src="card.img" alt="">
<divclass="info">
<h4>{{ card.name}}</h4>
<p></p>
</div>
</li>
</ul>
</section>
<section id="section2">
<div>
<ul>
<liclass="bling-1"></li>
<liclass="bling-2"></li>
</ul>
<ul>
<liclass="effect-1"></li>
<liclass="effect-2"></li>
</ul>
</div>
<div>
<div>
<divclass="book"></div>
<img src="./src/img/gacha/click.png"alt="">
<imgsrc="./src/img/gacha/arrow.png" alt="">
</div>
<ul id="s2">
<li
:class="{
neww: card.isNew,
dead: card.isDead,
r: card.rarity.r,
sr: card.rarity.sr,
ssr:card.rarity.ssr
}"
v-for="card inlist">
<em></em>
<img:src="card.img" alt="">
<divclass="info">
<h4>{{ card.name}}</h4>
<p>{{ card.des}}</p>
</div>
<divclass="property">
<iclass="attack">{{ card.attack }}</i>
<iclass="defense"><span>{{ card.defense}}</span></i>
</div>
<divclass="shadow"></div>
</li>
</ul>
</div>
</section>
<section id="game-table-0">
<div>
<ul>
<li
:class="{
neww: card.isNew,
dead: card.isDead,
r: card.rarity.r,
sr: card.rarity.sr,
ssr:card.rarity.ssr
}"
v-for="card inaList">
<em></em>
<img:src="card.img" alt="">
<divclass="info">
<h4>{{ card.name}}</h4>
</div>
<div>
<iclass="attack">{{ card.attack }}</i>
<iclass="defense"><span>{{ card.health}}</span></i>
</div>
</li>
</ul>
</div>
<div>
<ul>
<li
:class="{
neww: card.isNew,
dead: card.isDead,
r: card.rarity.r,
sr: card.rarity.sr,
ssr:card.rarity.ssr
}"
v-for="card indList">
<em></em>
<img:src="card.img" alt="">
<divclass="info">
<h4>{{ card.name}}</h4>
</div>
<divclass="property">
<iclass="attack">{{ card.attack }}</i>
<i><span>{{card.health }}</span></i>
</div>
</li>
</ul>
</div>
<ul>
</ul>
</section>
<section id="game-table-1">
<ul id="gt"></ul>
</section>
<div></div>
<div>
<div></div>
<p>关于本项目</p>
<div>
<p style="font-size: 18px">参考开源项目：</p>
<p><ahref="https://github.com/supperjet/Dot">supperjet/Dot</a></p>
<p><ahref="https://github.com/Kagami-src/MerusutoChristina">Kagami-src/MerusutoChristina</a></p>
<p style="font-size: 18px; margin-top: 10px">非商业使用素材：</p>
<p><a href="http://mlk.qijee.com/">梅露可物语</a></p>
<p><a href="http://www.beva.com/">贝拉卡片翻翻看</a></p>
</div>
<div>
<input type="button" value="确定"/>
</div>
</div>
<scriptsrc="./build/js/vue.min.js"></script>
<script src="./build/js/polyfill.js"></script>
<script src="./src/js/cardsData.js"></script>
<script src="./build/js/tool.js"></script>
<script src="./build/js/card.js"></script>
</body>
</html>
欢迎加入新的学习交流群568663768，定期更新群文件学习资料