Widget Quà tặng noel Widget

Meta · Nov 22, 2024

Go to widgets admin.php?widgets select add HTML widget and write the code:

CSS:

<svg id=canvas class="card js-canvas" width=100 height=130 viewBox="0 0 100 130">
    <defs>
        <symbol id="top-limb" width="20" height="10" viewBox="40 0 20 15" refX="50" refY="0">
            <path d="M50,0 C 50,0 53,5 56,13 C 53,10 47,10 44,13 C 47,5 50,0 50,0" class="limb" />
            <!-- <path d="M50,0 C 50,0 55,5 60,10 C 53,10 47,10 40,10 C 45,5 50,0 50,0" class="limb" /> -->
        </symbol>


        <clipPath id="clip-tree">
            <rect x=0 y=0 width=100 height=95 />
        </clipPath>

        <filter id="shadow">
            <feDropShadow stdDeviation="1" dx="0.2" dy="0.8" flood-color="rgba(0,0,0,.3)"/>
        </filter>

        <symbol id="fireworks-symbol" width=12 height=12 viewBox="-1 -1 12 12">
            <path id="fireworks-ray" d="M 4,4 v 0" stroke=red stroke-width=1 stroke-linecap=round />
            <use href="#fireworks-ray" style="transform-origin: 5px 5px; transform: rotate(60deg);" />
            <use href="#fireworks-ray" style="transform-origin: 5px 5px; transform: rotate(120deg);" />
            <use href="#fireworks-ray" style="transform-origin: 5px 5px; transform: rotate(180deg);" />
            <use href="#fireworks-ray" style="transform-origin: 5px 5px; transform: rotate(240deg);" />
            <use href="#fireworks-ray" style="transform-origin: 5px 5px; transform: rotate(300deg);" />
        </symbol>
    </defs>


    <g clip-path="url(#clip-tree)">
        <g id="tree">
            <rect x=47 y=37 width=6 height=15 class="tree-trunk"/>
            <use href="#top-limb" x=37 y=0 width=26 height=21 />
            <use href="#top-limb" x=34 y=11 width=32 height=24 />
            <use href="#top-limb" x=31 y=22 width=38 height=29 />
        </g>
    </g>

    <g id="spheres">
        <circle r="1" cx="55" cy="11" fill="#E52020"></circle>
        <circle r="1.5" cx="43" cy="23" fill="#E52020"></circle>
        <circle r="2" cx="43" cy="35" fill="#E52020"></circle>
        <circle r="2.3" cx="59" cy="38" fill="#E52020"></circle>
        <circle r="2" cx="57" cy="25" fill="#E52020"></circle>
        <circle r="1.3" cx="53" cy="32" fill="#F0A800"></circle>
        <circle r="1.5" cx="51" cy="16" fill="#F0A800"></circle>
        <circle r="1.8" cx="50" cy="25" fill="#F0A800"></circle>
        <circle r="1" cx="49" cy="7" fill="#F0A800"></circle>
    </g>

    <g id="fireworks">
        <use href="#fireworks-symbol" x="17" y="23" width="6" height="6"></use>
        <use href="#fireworks-symbol" x="30" y="43" width="6" height="6"></use>
        <use href="#fireworks-symbol" x="75" y="43" width="6" height="6"></use>
        <use href="#fireworks-symbol" x="60" y="9"  width="6" height="6"></use>
        <use href="#fireworks-symbol" x="20" y="11" width="6" height="6"></use>
        <use href="#fireworks-symbol" x="25" y="26" width="6" height="6"></use>
        <use href="#fireworks-symbol" x="56" y="23" width="6" height="6"></use>
    </g>

    <g id="box" style="filter: url(#shadow);">
        <rect id="box-bottom" class="box-cardboard" x="37.5" y="70" fill="#FF931E" width="25" height="25"/>
        <rect id="bottom-ribbon" x="47.8" y="70" fill="#E52020" width="4.3" height="25"/>
        <rect id="lid-shadow" x="37.5" y="77" opacity="0.25" width="25" height="2"/>
        <g id="lid">
            <g id="ribbon">
                <path fill="#E52020" d="M50.9,71.1h-1.8c-0.5,0-0.9-0.4-0.9-0.9v-2.1c0-0.5,0.4-0.9,0.9-0.9h1.8c0.5,0,0.9,0.4,0.9,0.9v2.1
                    C51.8,70.8,51.4,71.1,50.9,71.1z"/>
                <path fill="#B51A19" d="M62.1,67.8c0.1-0.1,0.2-0.3,0.2-0.5c-0.3-0.5-0.7-1.2-1.2-2c-2.1,3.4-7.4,3.8-9.3,3.9c0,0.2,0,0.5,0,0.7
                    C57.2,69.9,60.8,70,62.1,67.8z"/>
                <path fill="#E52020" d="M59.7,65.9c1.7,0.9,1.3,2.5,0.6,3.3c0.8-0.3,1.4-0.7,1.8-1.4c1.2-2.1-0.3-5.4-3.6-4.6s-5,4.8-6.7,5v0.9
                    C53.8,69,57.8,64.9,59.7,65.9z"/>
                <path fill="#B51A19" d="M48.2,69.5c-2.8,0-8.7-0.1-10.1-2.9c-1-2-1.2,0.3-1.3,1.8c0.7,0.9,1.9,1.7,3.9,1.7c4.7,0,6.1,0,7.4,0
                    C48.2,69.8,48.2,69.6,48.2,69.5z"/>
                <path fill="#E52020" d="M39,67.3c1.5-1.7,7.6,1.7,9.2,1.7c0-0.4,0-0.7,0-0.7c-2.7-0.5-6.6-6.1-10.8-3.5c-1.8,1.1-1.5,4.1,1.4,5
                    C38.4,68.9,38.4,67.9,39,67.3z"/>
            </g>

            <rect class="box-cardboard" x="36.1" y="70" fill="#FF931E" width="27.8" height="7"/>
            <rect x="47.5" y="69.9" fill="#E52020" width="4.9" height="7.1"/>
            <rect x="36.1" y="70" opacity="0.32" fill="#FFFFFF" width="27.8" height="0.3"/>
        </g>
    </g>

    <text class="congratulation-text" x=50 y=112.5>Noel 2025</text>
<style>
/* CARD */
.card {
    width: 100%;
    height: 250px;
    display: block;
    animation: pull-card 2.5s 1s cubic-bezier(0, 0.29, 0.34, 1) backwards;
}
@keyframes pull-card {
    0% {
        transform: translate(-85vw, -40vh) rotate(10deg);
        box-shadow: 6px 15px 80px rgb(0 0 0 / .6);
    }
    50% {
        box-shadow: 6px 15px 80px rgb(0 0 0 / .6);
    }
    80% {
        transform: none;
        box-shadow: 6px 15px 40px rgb(0 0 0 / .5);
    }
}

/* TREE */
#tree {
    filter: url(#shadow);
    transform: translateY(26px);
    transition: .3s;
}
#canvas:not(.anim-step-1) #tree {
    transform: translateY(70px);
}
#canvas:not(.anim-step-2) #tree {
    cursor: pointer;
}
#canvas:not(.anim-step-2) #tree:hover {
    transform: translateY(25px);
}
#canvas.anim-step-1 #tree {
    animation: jump-up 0.3s ease-out backwards;
}
@keyframes jump-up {
    0% {
        transform: translateY(70px);
    }
    70% {
        transform: translateY(20px);
    }
}
.limb {
    fill: #018C28;
}
#canvas.anim-step-1 .limb {
    animation: jelly-limb 0.67s ease-in-out forwards;
}

@keyframes jelly-limb {
    0% {
        d: path("M50,0 C 50,0 53,5 56,13 C 53,10 47,10 44,13 C 47,5 50,0 50,0");
    }
    10% {
        d: path("M50,0 C 50,0 53,5 55,15 C 53,10 47,10 45,15 C 47,5 50,0 50,0");
    }
    25% {
        d: path("M50,0 C 50,0 53,5 55,15 C 53,10 47,10 45,15 C 47,5 50,0 50,0");
    }
    40% {
        d: path("M50,0 C 50,0 55,5 60,5 C 53,10 47,10 40,5 C 45,5 50,0 50,0");
    }
    67% {
        d: path("M50,0 C 50,0 55,5 60,13 C 53,10 47,10 40,13 C 45,5 50,0 50,0");
    }
    85% {
        d: path("M50,0 C 50,0 55,5 60,8.5 C 53,10 47,10 40,8.5 C 45,5 50,0 50,0");
    }
    95% {
        d: path("M50,0 C 50,0 55,5 60,10.5 C 53,10 47,10 40,10.5 C 45,5 50,0 50,0");
    }
    100% {
        d: path("M50,0 C 50,0 55,5 60,10 C 53,10 47,10 40,10 C 45,5 50,0 50,0");
    }
}

.tree-trunk {
    fill: brown;
}
/* GIFT BOX */
#box {
    transition: .3s;
    transform-box: fill-box;
    transform-origin: center;
}
#canvas:not(.anim-step-1) #box {
    cursor: pointer;
}
#canvas:not(.anim-step-1) #box:hover {
    transform: scale(1.03);
}

#canvas.anim-step-1 #lid {
    animation: blow-off .2s ease-out forwards;
    transform-origin: 80% 60%;
}
@keyframes blow-off {
    to {
        transform: translate(80%) rotate(50deg);
    }
}

.box-cardboard {
    fill: #F0A800;
}
#canvas.anim-step-1 #lid-shadow,
#canvas.anim-step-1 #bottom-ribbon {
    display: none;
}
/* TREE SPHERES */
#spheres {
    transform: translateY(26px);
}
#canvas:not(.anim-step-2) #spheres {
    display: none;
}
#canvas.anim-step-2 #spheres circle {
    transform-box: fill-box;
    transform-origin: center;
    animation: sphere-in 1s ease-out backwards;
}
#canvas.anim-step-2 #spheres circle:nth-child(4n) {
    animation-delay: .1s;
}
#canvas.anim-step-2 #spheres circle:nth-child(4n+1) {
    animation-delay: .2s;
}
#canvas.anim-step-2 #spheres circle:nth-child(4n+2) {
    animation-delay: .3s;
}
#canvas.anim-step-2 #spheres circle:nth-child(4n+3) {
    animation-delay: .4s;
}
@keyframes sphere-in {
    0% {
        transform: translateY(-4px) scale(0);
    }
    44% {
        transform: translateY(-1px) scale(1);
    }
}
/* FIREWORKS */
#fireworks-symbol path {
    display: none;
    animation: fireworks 1s linear infinite both;
    transform-box: fill-box;
    transform-origin: bottom;
    animation-delay: var(--animation-delay);
}
#canvas.anim-step-3 #fireworks-symbol path {
    display: block;
}
#fireworks use {
    visibility: hidden;
}
#canvas.anim-step-3 #fireworks use {
    animation: hide calc(1s + var(--animation-delay)) linear;
}
@keyframes hide {
    from {
        visibility: visible;
    }
}
#fireworks use:nth-child(7n+1) {
    --animation-delay: .2s;
}
#fireworks use:nth-child(7n+2) {
    --animation-delay: .6s;
}
#fireworks use:nth-child(7n+3) {
    --animation-delay: 1s;
}
#fireworks use:nth-child(7n+4) {
    --animation-delay: 1.25s;
}
#fireworks use:nth-child(7n+5) {
    --animation-delay: 1.7s;
}
#fireworks use:nth-child(7n+6) {
    --animation-delay: 2s;
}
@keyframes fireworks {
    0% {
        opacity: 0;
        d: path("M 5,3 v 0");
    }
    5% {
        opacity: 1;
        d: path("M 5,3 v 0");
    }
    50% {
        opacity: 1;
        d: path("M 5,3 v -2");
    }
    90% {
        opacity: 1;
        d: path("M 5,0 v 0");
    }
    100% {
        opacity: 0;
        d: path("M 5,0 v 0");
    }
}
/* TEXT */
#canvas:not(.anim-step-3) .congratulation-text {
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}
.congratulation-text {
    transition: 3s 1s ease-out;
    font: 6px Roboto Slab, Arial, sans-serif;
    text-anchor: middle;
    dominant-baseline: middle;
    text-transform: uppercase;
    fill: #e52020;
}

.profile-link-text {
    font-size: 3px;
    text-transform: none;
    transition: .25s 3s ease-out;
}

.profile-link-text a {
    fill: hsl(34 78% 30%);
}
     
.controls {
    position: absolute;
    right: 10px;
    top: 10px;
}
.btn-replay {
    padding: .6em 1em;
    background: hsl(0, 0%, 90%);
    border: none;
    color: hsl(0, 0%, 30%);
    font-size: 1.4rem;
    transition: 1.5s;
    cursor: pointer;
    visibility: visible;
    outline: none;
}
.btn-replay::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 1px 3px 5px rgb(0 0 0 / .5);
    opacity: 0.7;
    transition: .15s;
}
.btn-replay:hover::before,
.btn-replay:focus::before {
    opacity: 1;
}
.btn-replay:active::before {
    opacity: 0;
}
.hide {
    visibility: hidden;
    opacity: 0;
    transition-duration: .6s;
}
</style>
<script>
    const canvas = document.querySelector('.js-canvas')
const replayBtn = document.querySelector('.js-replay-btn')

document.querySelector('#box').addEventListener('click', () => {
    if (canvas.classList.contains('anim-step-1')) {
        return
    }
    canvas.classList.add('anim-step-1')
})

document.querySelector('#tree').addEventListener('click', () => {
    if (canvas.classList.contains('anim-step-2')) {
        return
    }
    canvas.classList.add('anim-step-2')

    setTimeout(() => {
        canvas.classList.add('anim-step-3')
        replayBtn.classList.remove('hide')
    }, 1000)
})

document.querySelector('.js-replay-btn').addEventListener('click', () => {
    canvas.classList.remove('anim-step-1')
    canvas.classList.remove('anim-step-2')
    canvas.classList.remove('anim-step-3')
    replayBtn.classList.add('hide')
})
</script>

ta được món quà như này