css布局实现一个蝴蝶与花朵的动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css布局实现一个蝴蝶与花朵的动画效果代码，将鼠标悬浮在上面试试
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>

:root {
        --black: #000;
        --yellow: #fdb105;
        --orange: #e4691c;
        --red: #000;
}

*:before,
*:after {
        position: absolute;
        content: "";
}

body {
        margin: 0;
        padding: 0;
        background: linear-gradient(180deg, #178ce8, #bfe2ff 85%, transparent 85%),
                linear-gradient(
                        to top,
                        #0a190b 0%,
                        #255226 4%,
                        #8bc34a 14%,
                        #1e6f20b3 15%,
                        transparent 15%
                );
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        perspective: 500vmin;
}

body *,
*:before,
*:after {
        box-sizing: border-box;
        position: absolute;
        margin: 0;
        padding: 0;
        box-sizing: inherit;
}

.butterfly {
        width: 80vmin;
        height: 60vmin;
        /* 
        background-size: cover;
    background-position: -3px 48%;
        background: url(./btf.jpg) no-repeat center;
        */
}

.butterfly > * {
        position: absolute;
}

.head {
        background: radial-gradient(ellipse at 31% 39%, #fff 0.15vmin, #fff0 0.25vmin),
                radial-gradient(ellipse at 65% 39%, #fff 0.15vmin, #fff0 0.25vmin),
                radial-gradient(ellipse at 15% 45%, #fff 0.15vmin, #fff0 0.25vmin),
                radial-gradient(ellipse at 85% 45%, #fff 0.15vmin, #fff0 0.25vmin),
                radial-gradient(ellipse at 15% 50%, #fff 0.1vmin, #fff0 0.2vmin),
                radial-gradient(ellipse at 85% 50%, #fff 0.1vmin, #fff0 0.2vmin),
                radial-gradient(ellipse at 29% 68%, #fff 0.25vmin, #fff0 0.35vmin),
                radial-gradient(ellipse at 71% 68%, #fff 0.25vmin, #fff0 0.35vmin),
                radial-gradient(ellipse at 27% 62%, #fff 0.2vmin, #fff0 0.3vmin),
                radial-gradient(ellipse at 73% 62%, #fff 0.2vmin, #fff0 0.3vmin), var(--black);
        width: 4vmin;
        height: 3vmin;
        left: calc(50% - 2vmin);
        top: calc(50% - 5vmin);
        border-radius: 2vmin;
        z-index: 2;
}

.head::before {
        border: 0.35vmin solid transparent;
        border-top: 0.5vmin solid #fff;
        left: calc(50% - 0.4vmin);
        top: 0.25vmin;
}

.mouth {
        width: 100%;
        height: 1.1vmin;
        top: -0.85vmin;
}

.mouth::before,
.mouth::after {
        border: 0.25vmin solid var(--black);
        height: 1vmin;
        border-radius: 0 100% 0 75%;
        width: 0.25vmin;
        transform: rotate(30deg);
        left: 1vmin;
        background: linear-gradient(18deg, var(--black) 55%, #fff 65%);
        box-shadow: 0 0 1px 1px var(--black) inset;
}

.mouth::after {
        transform: rotate(-30deg);
        left: 2.1vmin;
        border-radius: 100% 0 75% 0;
        background: linear-gradient(16deg, var(--black) 55%, #fff 65%);
}

.l-antenna,
.r-antenna {
        width: 0.25vmin;
        height: 14vmin;
        background: var(--black);
        top: -12.5vmin;
        transform: rotate(-32deg);
        border-radius: 0 30% 30% 30%;
        left: -2.5vmin;
}

.r-antenna {
        top: -12.5vmin;
        transform: rotate(30deg);
        border-radius: 30% 0 30% 30%;
        left: 6vmin;
}

.l-antenna:before,
.r-antenna:before {
        width: 0.85vmin;
        height: 2vmin;
        background: var(--black);
        top: -1.75vmin;
        border-radius: 0 100% 0% 100%;
        left: -0.75vmin;
        transform: rotate(-5deg);
}

.r-antenna:before {
        transform: rotate(190deg);
        left: 0.2vmin;
        border-radius: 100% 0%;
}

.l-antenna:after,
.r-antenna:after {
        width: 0.15vmin;
        height: 14vmin;
        background: var(--black);
        top: -0.5vmin;
        transform: rotate(-1deg);
        left: 0;
}

.r-antenna:after {
        transform: rotate(1deg);
        left: 0.15vmin;
}

.body {
        background: var(--black);
        width: 3vmin;
        height: 23vmin;
        left: calc(50% - 1.5vmin);
        top: calc(50% - 3vmin);
        border-radius: 1.5vmin 1.5vmin 150% 150%;
        z-index: 1;
}
.body:before {
        background: radial-gradient(ellipse at 10% 29%, #fff 0.15vmin, #fff0 0.25vmin),
                radial-gradient(ellipse at 90% 29%, #fff 0.15vmin, #fff0 0.25vmin),
                radial-gradient(circle at 90% 40%, #fff 0.15vmin, #fff0 0.25vmin),
                radial-gradient(circle at 10% 40%, #fff 0.15vmin, #fff0 0.25vmin),
                radial-gradient(circle at 90% 42%, #fff 0.1vmin, #fff0 0.2vmin),
                radial-gradient(circle at 10% 42%, #fff 0.1vmin, #fff0 0.2vmin), var(--black);
        width: 5vmin;
        height: 10vmin;
        left: calc(50% - 2.5vmin);
        top: calc(50% - 12.5vmin);
        border-radius: 70% 70% 100% 100%;
}

.body span {
        width: 3vmin;
        height: 2vmin;
        left: calc(50% - 1.5vmin);
        top: calc(50% + 10vmin);
        position: absolute;
}
.body span:before,
.body span:after {
        background: var(--black);
        width: 0.25vmin;
        height: 2vmin;
        left: calc(50% - 0.5vmin);
        top: calc(50% - 0.75vmin);
        border-radius: 40%;
        transform: rotate(-10deg);
}
.body span:after {
        left: calc(50% + 0.35vmin);
        transform: rotate(10deg);
}

.wing {
        width: 35vmin;
        height: 50vmin;
        left: 3.5vmin;
        top: 6vmin;
}
.wing > span:nth-child(1) {
        background: 
                
                /*** white ***/ radial-gradient(
                        ellipse at 27% 31%,
                        #ffffff 0.4vmin,
                        #fff0 0.55vmin
                ),
                radial-gradient(circle at 28% 31%, #ffffff 0.25vmin, #fff0 0.4vmin),
                radial-gradient(ellipse at 27% 34%, #ffffff 0.35vmin, #fff0 0.5vmin),
                radial-gradient(ellipse at 38% 23%, #ffffff 0.4vmin, #fff0 0.55vmin),
                radial-gradient(ellipse at 39% 27%, #ffffff 0.8vmin, #fff0 1vmin),
                radial-gradient(ellipse at 52% 16%, #ffffff 0.25vmin, #fff0 0.4vmin),
                radial-gradient(ellipse at 51% 16%, #ffffff 0.2vmin, #fff0 0.35vmin),
                radial-gradient(ellipse at 18% 93%, #fff 0.65vmin, #fff0 0.8vmin),
                radial-gradient(ellipse at 18% 93%, #fff 0.65vmin, #fff0 0.8vmin),
                radial-gradient(circle at 10% 91%, #fff 0.5vmin, #fff0 0.65vmin),
                radial-gradient(circle at 12% 83%, #fff 0.5vmin, #fff0 0.65vmin),
                radial-gradient(circle at 12.9% 83.5%, #fff 0.35vmin, #fff0 0.5vmin),
                radial-gradient(circle at 4.5% 86.5%, #fff 0.35vmin, #fff0 0.5vmin),
                radial-gradient(circle at 6.5% 79.5%, #fff 0.35vmin, #fff0 0.5vmin),
                radial-gradient(circle at 6.5% 77.5%, #fff 0.5vmin, #fff0 0.65vmin),
                radial-gradient(circle at 2% 80%, #fff 0.35vmin, #fff0 0.5vmin),
                radial-gradient(circle at 5.5% 70%, #fff 0.4vmin, #fff0 0.55vmin),
                radial-gradient(circle at 6% 68.5%, #fff 0.3vmin, #fff0 0.45vmin),
                radial-gradient(circle at 3.5% 65%, #fff 0.4vmin, #fff0 0.55vmin),
                /***yellow***/
                        radial-gradient(ellipse at 36% 37%, var(--yellow) 0.8vmin, #fff0 0.9vmin),
                radial-gradient(circle at 36.5% 36%, var(--yellow) 0.5vmin, #fff0 0.6vmin),
                radial-gradient(circle at 37% 45%, var(--yellow) 0.7vmin, #fff0 0.8vmin),
                radial-gradient(ellipse at 35.5% 48.25%, var(--yellow) 0.7vmin, #fff0 0.8vmin),
                radial-gradient(circle at 35.25% 46.75%, var(--yellow) 0.3vmin, #fff0 0.4vmin),
                radial-gradient(ellipse at 24% 44%, var(--yellow) 0.6vmin, #fff0 0.7vmin),
                radial-gradient(ellipse at 23% 45%, var(--yellow) 0.6vmin, #fff0 0.7vmin),
                radial-gradient(ellipse at 22.5% 46%, var(--yellow) 0.5vmin, #fff0 0.6vmin),
                radial-gradient(circle at 25% 53%, var(--yellow) 0.8vmin, #fff0 0.9vmin),
                radial-gradient(circle at 26.5% 51.5%, var(--yellow) 0.35vmin, #fff0 0.45vmin),
                radial-gradient(circle at 26.5% 49.5%, var(--yellow) 0.35vmin, #fff0 0.45vmin),
                radial-gradient(circle at 25.5% 50%, var(--yellow) 0.35vmin, #fff0 0.45vmin),
                radial-gradient(circle at 25.5% 73%, var(--yellow) 1.25vmin, #fff0 1.45vmin),
                /*** orange ***/
                        radial-gradient(circle at 25.5% 73%, var(--orange) 1.75vmin, #fff0 1.95vmin),
                radial-gradient(circle at 23% 80%, var(--orange) 0.75vmin, #fff0 0.85vmin),
                radial-gradient(circle at 22.5% 76%, var(--orange) 0.65vmin, #fff0 0.75vmin),
                radial-gradient(circle at 22.5% 78%, var(--orange) 0.65vmin, #fff0 0.75vmin),
                radial-gradient(
                        circle at 25.25% 79.25%,
                        var(--orange) 0.65vmin,
                        #fff0 0.75vmin
                ),
                radial-gradient(
                        circle at 24.25% 80.05%,
                        var(--orange) 0.65vmin,
                        #fff0 0.75vmin
                ),
                radial-gradient(circle at 29.5% 86%, var(--yellow) 0.65vmin, #fff0 0.75vmin),
                radial-gradient(circle at 30.75% 86%, var(--yellow) 0.35vmin, #fff0 0.45vmin),
                radial-gradient(ellipse at 35.5% 88%, var(--yellow) 0.75vmin, #fff0 0.875vmin),
                radial-gradient(ellipse at 19% 87%, var(--yellow) 0.65vmin, #fff0 0.75vmin),
                radial-gradient(ellipse at 19% 86%, var(--yellow) 0.65vmin, #fff0 0.75vmin),
                var(--black);

        width: 110%;
        height: 40%;
        border-radius: 100% 10%;
        transform: rotate(55deg) translate(2vmin, 4vmin);
        z-index: 2;
}
.wing > span:nth-child(1):before {
        background: radial-gradient(
                        circle at 6.5% 10%,
                        var(--yellow) 0.65vmin,
                        #fff0 0.75vmin
                ),
                radial-gradient(ellipse at 11% 72%, #fff 0.65vmin, #fff0 0.8vmin),
                radial-gradient(ellipse at 11% 73%, #fff 0.65vmin, #fff0 0.8vmin),
                radial-gradient(ellipse at 11% 73%, #fff 0.65vmin, #fff0 0.8vmin),
                radial-gradient(circle at 10% 47%, #fff 0.35vmin, #fff0 0.45vmin),
                radial-gradient(circle at 10% 49%, #fff 0.35vmin, #fff0 0.45vmin),
                radial-gradient(circle at 10% 51%, #fff 0.3vmin, #fff0 0.4vmin),
                radial-gradient(circle at 10% 52%, #fff 0.25vmin, #fff0 0.25vmin),
                radial-gradient(circle at 8% 33%, #fff 0.35vmin, #fff0 0.45vmin),
                radial-gradient(circle at 7% 31%, #fff 0.35vmin, #fff0 0.45vmin), var(--black);
        width: 60%;
        height: 60%;
        border-radius: 0 100% 0 48%;
        transform: rotate(-54deg) translate(2vmin, 15.35vmin);
}

.wing > span:nth-child(1):after {
        background: radial-gradient(circle at 50% 4%, #fff 0.35vmin, #fff0 0.5vmin),
                radial-gradient(circle at 62% 15%, #fff 0.35vmin, #fff0 0.5vmin),
                radial-gradient(circle at 58% 18%, #fff 0.45vmin, #fff0 0.6vmin),
                radial-gradient(circle at 63% 34%, #fff 0.35vmin, #fff0 0.5vmin),
                radial-gradient(circle at 67% 31%, #fff 0.25vmin, #fff0 0.375vmin),
                radial-grad.........完整代码请登录后点击上方下载按钮下载查看