div+css实现圣诞快乐按钮悬浮动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：悬停
代码描述：div+css实现圣诞快乐按钮悬浮动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
    @import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas&display=swap');

* {
    font-family: 'Mountains of Christmas', serif;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

:root {
    --red: #dc3d2a;
    --blue: #87ceeb;
}

.overflow {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;
    border-radius: 12px;
}

button {
    position: relative;
    width: 150px;
    height: 50px;
    border: 0px solid;
    outline: 0px solid;
    cursor: pointer;
    background: var(--blue);
    border-radius: 12px;
}

body {
    background: #212121;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.santa {
    width: 45px;
    position: absolute;
    z-index: -1;
    top: 0px;
    transition: 250ms;
}

.christmas-tree {
    width: 30px;
    position: absolute;
    transform: translateY(30px);
    transition: 300ms;
    transition-delay: 500ms;
}

.christmas-tree-1 {
    left: 0px;
    top: 20px;
}

.christmas-tree-2 {
    right: 0px;
    top: 20px;
}

.cloud-container {
    position: absolute;
    width: 100%;
    transform: translateY(-40px);
    transition: 250ms;
    transition-delay: 250ms;
}

.cloud {
    fill: #fff;
    position: absolute;
}

.cloud:nth-child(1) {
    left: 30px;
    top: 3px;
    animation-name: cloud;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: backwards;
}

.cloud:nth-child(2) {
    right: 30px;
    top: 14px;
    animation-name: cloud;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode: backwards;
}

@keyframes cloud {
    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(-4px);
    }

    100% {
        transform: translateX(4px);
    }
}

.snowflake {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.snowflake:nth-child(1) {
    transition: .8s;
     filter: drop-shadow(0 0 10px #fffdef);
    width: 30px;
    height: 30px;
    inset: 0;
}

.snowflake:nth-child(2) {
    transition: .8s;
     filter: drop-shadow(0 0 10px #fffdef);
    width: 20px;
    height: 20px;
    inset: 0;

}

.snowflake:nth-child(3) {
    transition: .8s;
     filter: drop-shadow(0 0 10px #fffdef);
    width: 40px;
    height: 40px;
    inset: 0;

}

.snowflake:nth-child(4) {
    transition: .8s;
     filter: drop-shadow(0 0 10px #fffdef);
    width: 10px;
    height: 10px;
    inset: 0;

}


.snowflake:nth-child(5) {
    transition: .8s;
     filter: drop-shadow(0 0 10px #fffdef);
    width: 8px;
    height: 8px;
    inset: 0;

}

.sun {
    position: absolute;
    inset: 0;
    margin: auto;
    animation-name: sun;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes sun {
    from {
        transform: rotate(0..5turn);
    }

    to {
        transform: rotate(1turn);
    }
}

.text-container {
    color: white;
    background: var(--red);
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 11;
    transition: 250ms;
    font-size: 16px;

}

/* hover state css */
button:hover{
    box-shadow: 0 0 25px var(--blue);
    
}

button:hover .christmas-tree {
    transform: translateY(0px);
}


button:hover .cloud-container {
    transform: translateY(0px);
}


button:hover .snowflake:nth-child(1) {
    top: 95%;
    left: 25%;
    animation-name: sun;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    opacity: 1;
}

button:hover .snowflake:nth-child(2) {
    top: -35%;
    left: 10%;
    animation-name: sun;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    opacity: 1;
}

button:hover .snowflake:nth-child(3) {
    opacity: 1;
    top: -80%;
    left: -30%;
    animation-name: sun;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

button:hover .snowflake:nth-child(4) {
    opacity: 1;
    top: 120%;
    left: 80%;
    animation-name: sun;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

button:hover .snowflake:nth-child(5) {
    opacity: 1;
    top: 25%;
    left: 115%;
    animation-name: sun;
    animation-duration: 20s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

button:hover .santa {
    transform: translate(-30px, -40px);
}

button:hover .text-container {
    transform: translateY(-100%);
}


/* hover state css */
</style>
</head>



<body>
    <button>
                <div class="overflow">
                    <div class="text-container">Merry Christmas
            </div>
                    <svg class="christmas-tree christmas-tree-1" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="0 0 512 512" id="christmas-tree">
                        <path fill="#d88a55" d="M285 406.03v88.47a10.004 10.004 0 0 1-10 10h-38a10.004 10.004 0 0 1-10-10v-88.47Z"></path>
                        <path fill="#c57a44" d="M285 406.03v69.46l-58-59.1v-10.36h58z"></path>
                        <circle cx="370" cy="468" r="22.5" fill="#fed402"></circle>
                        <path fill="#fac600" d="M383.398 449.925a22.5 22.5 0 0 1-34.796 25.032 22.5 22.5 0 1 0 34.796-25.032Z"></path>
                        <circle cx="142" cy="468" r="22.5" fill="#fed402"></circle>
                        <path fill="#46cc8d" d="M436.67 396.93a819.475 819.475 0 0 1-178.17 20.09 820.131 820.131 0 0 1-164.76-16.15c-6.41-1.29-12.56-2.62-18.45-3.95a8.538 8.538 0 0 1-4.1-2.15 5.655 5.655 0 0 1-.42-.43c0-.01 0-.01-.01-.01a7.541 7.541 0 0 1-.69-.94 9.171 9.171 0 0 1-.52-1.04c-.08-.22-.15-.43-.21-.65a.076.076 0 0 0-.01-.04c-.04-.18-.08-.37-.11-.56a.22.22 0 0 1-.01-.08c-.02-.14-.04-.28-.05-.42a6.602 6.602 0 0 1 0-.89 6.22 6.22 0 0 1 1.75-3.86l.84-.9L240.5 204.21l8.92-9.55a7.823 7.823 0 0 1 .66-.63 9.555 9.555 0 0 1 11.84 0 7.832 7.832 0 0 1 .66.63l106.03 113.56 10.32 11.05 62.16 66.58c3.69 3.96 1.36 9.77-4.42 11.08Z"></path>
                        <path fill="#00c27a" d="M436.67 396.93a819.475 819.475 0 0 1-178.17 20.09 820.131 820.131 0 0 1-164.76-16.15c-6.41-1.29-12.56-2.62-18.45-3.95a8.538 8.538 0 0 1-4.1-2.15 5.655 5.655 0 0 1-.42-.43c0-.01 0-.01-.01-.01a7.541 7.541 0 0 1-.69-.94 9.171 9.171 0 0 1-.52-1.04c-.08-.22-.15-.43-.21-.65a.076.076 0 0 0-.01-.04c-.04-.18-.08-.37-.11-.56a.22.22 0 0 1-.01-.08c-.02-.14-.04-.28-.05-.42a6.602 6.602 0 0 1 0-.89 617.144 617.144 0 0 0 67.78 10.19 576.568 576.568 0 0 0 76.56 2.12c60.36-2.37 124.42-16.24 158.32-24.61a14.913 14.913 0 0 0 7.31-24.66l-19.78-21.2-10.5-11.24-108.35-116.1 8.92-9.55a7.823 7.823 0 0 1 .66-.63 8.98 8.98 0 0 1 11.84 0 7.832 7.832 0 0 1 .66.63l106.03 113.56 10.32 11.05 62.16 66.58c3.69 3.96 1.36 9.77-4.42 11.08Z"></path>
                        <path fill="#46cc8d" d="M409.45 301.52a695.395 695.395 0 0 1-151.32 17.06 695.321 695.321 0 0 1-155.63-17.07c-4.89-1.11-6.84-6.05-3.72-9.4l62.83-67.29 88.8-95.11a7.993 7.993 0 0 1 11.18 0l88.79 95.11 62.83 67.29c3.14 3.36 1.16 8.3-3.76 9.41Z"></path>
                        <path fill="#46cc8d" d="M409.45 301.52a704.636 704.636 0 0 1-151.32 17.06 695.321 695.321 0 0 1-155.63-17.07c-3.89-.88-5.92-4.19-5.01-7.19a5.482 5.482 0 0 1 1.29-2.21l62.83-67.29 7.01-7.51 10.24-10.97 61.64-66.02 9.91-10.61a7.993 7.993 0 0 1 11.18 0l88.79 95.11 60.96 65.29h.01l1.86 2c3.14 3.36 1.16 8.3-3.76 9.41Z"></path>
                        <path fill="#00c27a" d="M409.45 301.52q-7.68 1.74-16.07 3.43a696.535 696.535 0 0 1-135.25 13.63 695.321 695.321 0 0 1-155.63-17.07c-3.89-.88-5.92-4.19-5.01-7.19a698.084 698.084 0 0 0 115.64 9.26c28.51-.08 64.07-5.82 93.95-11.93 12.54-2.57 24.07-5.2 33.66-7.51 1.26-.3 2.48-.59 3.66-.88a14.503 14.503 0 0 0 7.15-23.99l-46.17-49.45-64.88-69.5 9.91-10.61a7.993 7.993 0 0 1 11.18 0l88.79 95.11 60.97 65.29 1.86 2c3.14 3.36 1.16 8.3-3.76 9.41Z"></path>
                        <circle cx="146.433" cy="365.414" r="7.5" fill="#0067c5"></circle>
                        <circle cx="285" cy="376.542" r="22.5" fill="#00c27a"></circle>
                        <path fill="#f4d902" d="M134.43 197.67a4.263 4.263 0 0 0-.71 1.02 3.535 3.535 0 0 0-.16.34c-.04.12-.09.24-.12.36-.68 2.31.89 4.84 3.89 5.52q6.855 1.56 14.45 3.06a276.19 276.19 0 0 0 32.41-5.52c-17.94-.89-34.59-2.61-49.76-4.78zm152.91-63.44 10.25 10.98q8.58-7.365 16.54-15.49l-10.23-10.96a2.612 2.612 0 0 0-.25.23q-7.83 7.995-16.31 15.24z"></path>
                        <circle cx="276.328" cy="369.042" r="22.5" fill="#e53950"></circle>
                        <circle cx="194.053" cy="327.45" r="22.5" fill="#00c27a"></circle>
                        <circle cx="186.413" cy="318.588" r="22.5" fill="#e53950"></circle>
                        <path fill="#fac600" d="M155.398 449.925a22.5 22.5 0 0 1-34.796 25.032 22.5 22.5 0 1 0 34.796-25.032Z"></path>
                        <path fill="#46cc8d" d="M374.64 204.92a537.51 537.51 0 0 1-117 13.19 538.681 538.681 0 0 1-105.86-10.14q-7.59-1.5-14.45-3.06c-3-.68-4.57-3.21-3.89-5.52.03-.12.08-.24.12-.36a3.535 3.535 0 0 1 .16-.34 4.263 4.263 0 0 1 .71-1.02l.02-.02 3.28-3.51L240.5 84.06l11.18-11.97a6.176 6.176 0 0 1 8.64 0l43.58 46.67 10.23 10.96 63.42 67.93c2.42 2.59.89 6.41-2.91 7.27Z"></path>
                        <path fill="#00c27a" d="M374.64 204.92a537.51 537.51 0 0 1-117 13.19 538.681 538.681 0 0 1-105.86-10.14q-7.59-1.5-14.45-3.06c-3-.68-4.57-3.21-3.89-5.52.03-.12.08-.24.12-.36a3.535 3.535 0 0 1 .16-.34 4.263 4.263 0 0 1 .71-1.02 540.684 540.684 0 0 0 78.21 5.44c28.6-.08 66.39-7.53 91.83-13.41a16.884 16.884 0 0 0 8.55-27.97l-15.43-16.52-10.25-10.98-46.84-50.17 11.18-11.97a5.914 5.914 0 0 1 8.64 0l43.58 46.67 10.23 10.96 63.42 67.93c2.42 2.59.89 6.41-2.91 7.27Z"></path>
  .........完整代码请登录后点击上方下载按钮下载查看