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-.........完整代码请登录后点击上方下载按钮下载查看