Web前端期末大作业---HTML+CSS+JS实现的翻纸牌记忆游戏

效果演示： 文末获取源码

代码目录：

主要代码实现：

CSS样式：

@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,900&display=swap");
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    min-height: 100vh;
    color: hsl(340, 5%, 20%);
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" opacity="0.1" width="100" height="100" fill="hsl(340, 10%, 30%)"><path d="M21.5 18.938a8 8 0 0113.856-8q6 10.392-3.856 25.32-17.856 1.072-23.856-9.32a8 8 0 0113.856-8M67 11.144L87.124 18 83 38.856 62.876 32zM77.5 79.33a14 14 0 01-5.49 20.49l25.98-15a14 14 0 01-20.49-5.49 9 9 0 01-15.588 9 9 9 0 0115.588-9 9 9 0 01-9-15.588 9 9 0 019 15.588 9 9 0 0115.588-9 9 9 0 01-15.588 9M27.5 79.33a14 14 0 01-5.49 20.49l25.98-15a14 14 0 01-20.49-5.49 8 8 0 01-13.856 8q-5-8.66 3.856-25.32 18.856.66 23.856 9.32a8 8 0 01-13.856 8"/></svg>'), hsl(340, 10%, 5%);
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    padding: 100px 0 0 0;
}

main.svelte-185gx00 {
    margin: 1rem auto;
    width: 90vw;
    max-width: 700px;
    display: grid;
    grid-template-columns: repeat(auto-fit, 140px);
    grid-auto-rows: max-content;
    grid-gap: 1rem;
    justify-content: center
}

div.svelte-1nxkdr7 {
    position: fixed;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    background: hsla(0, 0%, 10%, 0.5);
    backdrop-filter: blur(1px)
}

section.svelte-1nxkdr7 {
    padding: 3rem 3.5rem;
    background: url('data:image/svg+xml;utf8,<svg opacity="0.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="250" height="250"><defs><circle id="a" cx="0" cy="0" r="5" fill="hsl(0, 0%, 0%)" stroke="none"/><path id="b" fill="none" stroke="hsl(0, 0%, 0%)" stroke-width="6" stroke-linejoin="round" stroke-linecap="round" d="M0 0a4 4 0 00-4-4 4 4 0 010-8 4 4 0 000-8 4 4 0 010-8 4 4 0 004-4"/></defs><g><g><g><g transform="translate(50 100) scale(1 1) translate(-47.5 -2.5) rotate(45) translate(-50 -100) translate(50 50)"><path fill="hsl(0, 0%, 0%)" stroke="hsl(0, 0%, 0%)" stroke-width="10" stroke-linejoin="round" stroke-linecap="round" d="M0 45l-27.5-55h55z"/><use href="%23a" transform="translate(-40 -25)"/><use href="%23a" transform="translate(-15 -45)"/><use href="%23a" transform="translate(0 -25)"/><use href="%23a" transform="translate(40 -30)"/><use href="%23b" transform="translate(-15 -18) rotate(-25)"/><use href="%23b" transform="translate(15 -18) rotate(30)"/></g></g></g></g></svg>'), url('data:image/svg+xml;utf8,<svg opacity="0.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="250" height="250"><defs><circle id="a" cx="0" cy="0" r="5" fill="hsl(0, 0%, 0%)" stroke="none"/><path id="b" fill="none" stroke="hsl(0, 0%, 0%)" stroke-width="6" stroke-linejoin="round" stroke-linecap="round" d="M0 0a4 4 0 00-4-4 4 4 0 010-8 4 4 0 000-8 4 4 0 010-8 4 4 0 004-4"/></defs><g><g><g><g transform="translate(50 100) scale(-1 1) translate(-47.5 -2.5) rotate(45) translate(-50 -100) translate(50 50)"><path fill="hsl(0, 0%, 0%)" stroke="hsl(0, 0%, 0%)" stroke-width="10" stroke-linejoin="round" stroke-linecap="round" d="M0 45l-27.5-55h55z"/><use href="%23a" transform="translate(-40 -25)"/><use href="%23a" transform="translate(-15 -45)"/><use href="%23a" transform="translate(0 -25)"/><use href="%23a" transform="translate(40 -30)"/><use href="%23b" transform="translate(-15 -18) rotate(-25)"/><use href="%23b" transform="translate(15 -18) rotate(30)"/></g></g></g></g></svg>'), hsl(0, 0%, 100%);
    background-size: 30%;
    background-position: 0% 100%, 100% 100%;
    background-repeat: no-repeat;
    text-align: center;
    border: 0.75rem solid hsl(340, 70%, 50%);
    border-radius: 15px;
    box-shadow: 0 2px 10px -5px hsla(0, 0%, 0%, 0.2)
}

h1.svelte-1nxkdr7 {
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    font-weight: 800
}

button.svelte-1nxkdr7 {
    font-weight: 800;
    padding: 1.25rem 1.5rem;
    border: none;
    color: inherit;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="hsl(340, 70%, 50%)"><g transform="translate(25 25)"><path d="M 0 -4 a 7 7 0 0 1 14 0 q 0 12 -14 18 q -14 -7 -14 -18 a 7 7 0 0 1 14 0" /></g></svg>'), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="hsl(340, 70%, 50%)"><g transform="translate(25 25)"><path d="M 0 -15 l 11 15 -11 15 -11 -15 z" /></g></svg>'), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="hsl(340, 5%, 20%)"><g transform="translate(25 25)"><path d="M 0 5 a 12 12 0 0 1 -12 12 h 24 a 12 12 0 0 1 -12 -12 a 7 7 0 0 1 -14 0 q 0 -10 14 -16 q 14 6 14 16 a 7 7 0 0 1 -14 0"/></g></svg>'), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="hsl(340, 5%, 20%)"><g transform="translate(25 25)"><path d="M 0 5 a 12 12 0 0 1 -12 12 h 24 a 12 12 0 0 1 -12 -12 a 7 7 0 0 1 -14 0 7 7 0 0 1 14 0 7 7 0 0 1 0 -14 7 7 0 0 1 0 14 7 7 0 0 1 14 0 7 7 0 0 1 -14 0"/></g></svg>');
    background-size: 2rem;
    background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%;
    background-repeat: no-repeat;
    font-family: inherit;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem
}

article.svelte-1m66100 {
    position: relative;
    padding: 2rem;
    border-radius: 20px;
    width: 140px;
    height: 165px;
    transition: transform 1s cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transform: perspective(800px) rotateY(0deg);
    transform-style: preserve-3d
}

.flip.svelte-1m66100 {
    transform: perspective(800px) rotateY(180deg)
}

.paired.svelte-1m66100 {
    animation: svelte-1m66100-pair 0.25s 1s ease-in-out 2 alternate
}

@keyframes svelte-1m66100-pair {
    25% {
        transform: rotateZ(-5deg)
    }
    75% {
        transform: rotateZ(5deg)
    }
}

.face.svelte-1m66100,
button.svelte-1m66100 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit
}

button.svelte-1m66100 {
    background: none;
    border: none
}

.face.svelte-1m66100 {
    backface-visibility: hidden;
    border: 0.75rem solid hsl(340, 70%, 50%);
    background: hsl(0, 0%, 100%);
    pointer-events: none
}

.back.svelte-1m66100 {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200" height="200"><defs><path id="a" d="M0-50L50 0 0 50-50 0z" stroke="none"/><g id="b"><use href="%23a" fill="hsl(340, 70%, 50%)"/><use href="%23a" transform="scale(.8)" fill="hsl(345, 90%, 65%)"/><use href="%23a" transform="scale(.6)" fill="hsl(0, 90%, 60%)"/><use href="%23a" transform="scale(.4)" fill="hsl(30, 80%, 70%)"/><use href="%23a" transform="scale(.2)" fill="hsl(50, 95%, 80%)"/></g></defs><use href="%23b"/><use href="%23b" x="100"/><use href="%23b" x="100" y="100"/><use href="%23b" y="100"/><use href="%23b" x="50" y="50"/></svg>'), hsl(0, 0%, 100%);
    background-size: 25%;
    transform: rotateY(180deg)
}

.front.svelte-1m66100 {
    background: url('data:image/svg+xml;utf8,<svg opacity="0.1" xmlns="http://www.w3.org/2000/svg" width="480" height="440" viewBox="0 0 240 220" stroke="hsl(340, 70%, 50%)" stroke-width="20" stroke-linejoin="round" stroke-linecap="round" fill="none"><g transform="translate(120 110) rotate(-35)"><path id="a" d="M50-22.5h-60 25a45 45 0 010 90h-75a45 45 0 010-90"/><use transform="scale(-1)" href="%23a"/></g></svg>'), hsl(0, 0%, 100%);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 50% 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

h1.svelte-1m66100 {
    font-size: 2.5rem;
    font-weight: 900
}

HTML代码 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Svelte Concentration</title>
    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <script src="js/script.js"></script>

</body>

</html>

上面的图片文件和js文件需要引入

源码获取

大家可以点赞、收藏、关注、评论我啦、查看下方微信公众号获取~！

Web前端期末大作业---HTML+CSS+JS实现的翻纸牌记忆游戏

代码目录：

主要代码实现：

源码获取

猜你喜欢