Javascript r（'.stars'）.innerHTML； //在模式上显示移动、时间和等级 document.getElementsByClassName（'final-move'）。innerHTML=moves； document.getElementsByCla

r（'.stars'）.innerHTML； //在模式上显示移动、时间和等级 document.getElementsByClassName（'final-move'）。innerHTML=moves； document.getElementsByClassName（'star-rating'）。innerHTML=starting； document.getElementsByClassName（'total-time'）。innerHTML=finalTime； closeModal（）； } } //单击关闭图标后关闭模态 函数closeModal（）{ closeIcon.addEventListener（'click'，函数（e）{ modal.classList.remove（'show'）； startGame（）； }); } 函数重置（）{ modal.classList.remove（'show'）； startGame（）； } //将事件侦听器添加到每个卡 for（设i=0；i

html{
框大小：边框框；
}
*,
*：：之前，
*：：之后{
框大小：继承；
}
html，
身体{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
身体{
背景：#ffffff；
字体系列：“永久标记”，草书；
字体大小：16px；
}
.集装箱{
显示器：flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
}
h1{
字体系列：“Gloria Halleujah”，草书；
}
/*一副牌*/
.卡片组{
宽度：85%；
背景：#716F71；
填充：1rem；
边界半径：4px；
盒影：8px 9px 26px 0 rgba（46,61,73,0.5）；
显示器：flex；
柔性包装：包装；
证明内容：周围的空间；
对齐项目：居中；
利润率：0.03em；
}
.牌组.牌组{
身高：3.7雷姆；
宽度：3.7雷姆；
保证金：0.2rem 0.2rem；
背景：#141214；；
字号：0；
颜色：#ffffff；
边界半径：5px；
光标：指针；
显示器：flex；
证明内容：中心；
对齐项目：居中；
盒影：5px20px0rgba（46,61,73,0.5）；
}
.卡片组.卡片.打开{
/*变换：rotateY（0）*/
背景：#02b3e4；
游标：默认值；
动画名称：flipInY；
-webkit背面可见性：可见！重要；
背面可见性：可见！重要；
动画持续时间：.75秒；
}
.纸牌组.纸牌表演{
字体大小：33px；
}
.表演{
可见性：可见！重要；
不透明度：100！重要；
}
.卡片组.卡片匹配{
游标：默认值；
背景#E5F720；
字体大小：33px；
动画名称：橡皮筋；
-webkit背面可见性：可见！重要；
背面可见性：可见！重要；
动画持续时间：.75秒；
}
.卡片组.卡片.不匹配{
动画名称：脉冲；
-webkit背面可见性：可见！重要；
背面可见性：可见！重要；
动画持续时间：.75秒；
背景：#e2043b；
}
.card-deck.card.disabled{
指针事件：无；
不透明度：0.9；
}
/*记分板*/
.评分小组{
文本对齐：左对齐；
边缘底部：10px；
}
.记分板.星星{
保证金：0；
填充：0；
显示：内联块；
边距：0 5px 0 0；
}
.记分板.李星{
列表样式：无；
显示：内联块；
}
.score面板。重新启动{
浮动：对；
光标：指针；
}
法星先生{
颜色：#FFD700；
}
.计时器{
显示：内联块；
保证金：0.1rem；
}
/*祝贺你，莫代尔*/
.覆盖{
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
背景：rgba（0,0,0,0.7）；
过渡：不透明度500ms；
可见性：隐藏；
不透明度：0；
}
.覆盖：目标{
能见度：可见；
不透明度：1；
}
.弹出窗口{
利润率：70像素自动；
填充：20px；
背景：#ffffff；
边界半径：5px；
宽度：85%；
位置：相对位置；
过渡：所有5s易于输入输出；
字体系列：“Gloria Halleujah”，草书；
}
.弹出窗口h2{
边际上限：0；
颜色：#333；
字体系列：Tahoma，Arial，无衬线；
}
.弹出.关闭{
位置：绝对位置；
顶部：20px；
右：30px；
过渡：所有200ms；
字体大小：30px；
字体大小：粗体；
文字装饰：无；
颜色：#333；
}
.弹出.关闭：悬停{
颜色：#e5f720；
}
.弹出。祝贺您的消息，
.info消息{
最高高度：30%；
溢出：自动；
文本对齐：居中；
}
李先生{
显示：内联块；
}
.再来一次{
背景色：#141214；
填充：0.7雷姆1雷姆；
字号：1.1rem；
显示：块；
保证金：0自动；
宽度：50%；
字体系列：“Gloria Halleujah”，草书；
颜色：#ffffff；
边界半径：5px；
}
/*动画*/
@关键帧翻转{
从{
变换：透视（400px）旋转3d（0,1,0,90度）；
动画计时功能：轻松自如；
不透明度：0；
}
40% {
变换：透视（400px）旋转3d（0,1,0，-20度）；
动画计时功能：轻松自如；
}
60% {
变换：透视（400px）旋转3d（0,1,0,10度）；
不透明度：1；
}
80% {
变换：透视（400px）旋转3d（0,1,0，-5度）；
}
到{
变换：透视（400px）；
}
}
@关键帧橡皮筋{
从{
变换：scale3d（1,1,1）；
}
30% {
变换：scale3d（1.25,0.75,1）；
}
40% {
变换：scale3d（0.75,1.25,1）；
}
50% {
变换：scale3d（1.15,0.85,1）；
}
65% {
变换：scale3d（.95,1.05,1）；
}
75% {
变换：scale3d（1.05,95,1）；
}
到{
变换：scale3d（1,1,1）；
}
}
@关键帧脉冲{
从{
变换：scale3d（1,1,1）；
}
50% {
转换：scale3d（1.2,1.2,1.2）；
}
到{
变换：scale3d（1,1,1）；
}
}
/*媒体查询*/
@介质（最大宽度：320px）{
.卡片组{
宽度：85%；
}
.牌组.牌组{
身高：4.7雷姆；
宽度：4.7雷姆；
}
}
/*适用于平板电脑和更大屏幕*/
@介质（最小宽度：768px）{
.集装箱{
字体大小：22px；
}
.卡片组{
宽度：660px；
高度：680px；
}
.牌组.牌组{
高度：125px；
宽度：125px；
}
.弹出窗口{
宽度：60%；
}
}

配对游戏
配对游戏





0步











for (let i = 0; i < cards.length; i++) {
  card = cards[i];
  card.addEventListener('click', displayCard);
  card.addEventListener('click', cardOpen);
  card.addEventListener('click', congratulations);
}

let displayCard = function() {
  this.classList.toggle('open');
  this.classList.toggle('show');
  this.classList.toggle('disabled');
};

.card-deck .card.open {
    /* transform: rotateY(0); */
    background: #02b3e4;
    cursor: default;
    animation-name: flipInY;
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    animation-duration: .75s;
}

.card-deck .card.show {
    font-size: 33px;
}

.show {
    visibility: visible !important;
    opacity: 100 !important;
}