gsap+svg实现扑克牌背面图案翻转切换效果代码-html代码-BFW代码库

gsap+svg实现扑克牌背面图案翻转切换效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现扑克牌背面图案翻转切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
:root {
        --maincolor: #a4323c;
        --bakgroundcolor: #d9cdb8;
}

body {
        background-color: #fff;
        margin-top: 20px;
        display: grid;
        place-items: center;
        color: #000;
}

/* The card */
svg {
        margin: 0 auto;
}

#card {
        border-radius: 10px;
        margin: 0 auto;
}

.wrapper {
        text-align: center;
}

.st0 {
        fill: var(--maincolor);
}
.st1,
.background {
        fill: var(--bakgroundcolor);
}
.st2 {
        stroke: var(--bakgroundcolor);
        stroke-width: 2;
        fill: none;
}
.st4 {
        stroke: var(--bakgroundcolor);
        stroke-width: 1;
        fill: none;
}
.st11 {
        fill: var(--bakgroundcolor);
        opacity: 1;
}
.st12 {
        fill: var(--bakgroundcolor);
        opacity: 0.7;
}
.st10 {
        fill: var(--bakgroundcolor);
        opacity: 0.5;
}
.st9 {
        fill: var(--bakgroundcolor);
        opacity: 0.3;
}
.pattern,
.pattern1,
.pattern2,
.pattern3,
.pattern4,
.pattern5,
.pattern6 {
        stroke: var(--bakgroundcolor);
        stroke-width: 4;
}
.pattern {
        fill: url(#pattern);
}
.pattern1 {
        fill: url(#pattern1);
}
.pattern2 {
        fill: url(#pattern2);
}
.pattern3 {
        fill: url(#pattern3);
}
.pattern4 {
        fill: url(#pattern4);
}
.pattern5 {
        fill: url(#pattern5);
}
.pattern6 {
        fill: url(#pattern6);
}

/* Nav */

h1 {
        font-family: "Lato", sans-serif;
        letter-spacing: 1px;
        margin-top: 20px;
        text-transform: uppercase;
        font-size: 1.4em;
        display: block;
        font-weight: 900;
        text-align: center;
        width: 100%;
}

.nav {
        max-width: 400px;
        margin: 0 auto;
        text-align: center;
}
input {
        background: #fff;
        text-transform: uppercase;
        font-size: 0.8em;
        font-weight: 700;
        font-family: "Lato", sans-serif;
        letter-spacing: 1px;
        transition: 0.5s;
        margin: 5px;
        cursor: pointer;
        padding: 10px 15px;
        border: 1px solid #bbb;
        border-radius: 5px;
        min-width: 80px;
        color: #000;
}
input:hover {
        background: #ddd;
}
</style>



</head>

<body >
  <div class="wrapper">
        <svg width="300px" height="440px" id="card">

                <!-- Fence pattern -->
                <pattern id="pattern" x="0" y="0" patternUnits="userSpaceOnUse" patternTransform="rotate(0)" width="20" height="20" viewBox="0 0 20 20">
                        <line class="st2" x1="0" y1="0" x2="20" y2="20" />
                        <line class="st2" x1="0" y1="20" x2="20" y2="0" />
                </pattern>

                <!-- Dots pattern -->
                <pattern id="pattern1" x="0" y="0" patternUnits="userSpaceOnUse" patternTransform="rotate(0)" width="20" height="20" viewBox="0 0 20 20">
                        <circle class="st1" cx="5" cy="5" r="5&.........完整代码请登录后点击上方下载按钮下载查看