svg+css实现黑蝙蝠展翅飞翔动画效果代码-html代码-BFW代码库

svg+css实现黑蝙蝠展翅飞翔动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现黑蝙蝠展翅飞翔动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        :root {
                --basecolor: hsl(20, 70%, 40%);
        }
        
        body {
                background: #222;
                text-align: center;
        }
        
        /* Layout and font */
        .wrapper {
                width: 700px;
                position: relative;
                margin: auto;
        }
        
        .bat-overlay,
        .text {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
        }
        
        h1 {
                text-align: center;
                color: var(--basecolor);
                line-height: 0.9em;
                font-size: 6em;
                margin: 0.5em 0em 0.5em 0em;
                font-family: "Creepster", cursive;
        }
        
        .dark {
                color: #000;
                transition: 0.5s;
                transition-timing-function: ease-in-out;
                opacity: 0.5;
        }
        
        .light {
                transition: 0.5s;
                transition-timing-function: ease-in-out;
        }
        
        .bat-overlay {
                z-index: 10;
                pointer-events: none;
        }
        
        /* Dropdown*/
        
        #monster-select {
                background: rgba(0, 0, 0, 0.3);
                border: none;
                padding: 10px;
                color: var(--basecolor);
                border-radius: 10px;
                font-size: 1.2em;
                font-family: "Creepster", arial;
        }
        
        .dropdown {
                font-size: 1em;
                color: var(--basecolor);
        }
        
        .close {
                transition: 1s;
                opacity: 0;
        }
        
        select {
                outline: none;
                -webkit-appearance: none;
        }
        select:-moz-focusring {
                color: transparent;
                text-shadow: 0 0 0 #000;
        }
        
        /* Bats*/
        svg {
                width: 100%;
        }
        
        .eye {
                fill: var(--basecolor);
        }
        
        .shadow {
                -webkit-filter: blur(6px);
                filter: blur(6px);
                opacity: 0.2;
        }
        
        .bat {
                animation-direction: normal;
                animation: move 15s infinite;
                animation-timing-function: ease-in-out;
                transform-origin: 50% 50%;
        }
        
        .bat1 {
                animation-direction: normal;
                animation: move1 15s infinite;
                animation-timing-function: ease-in-out;
                transform-origin: 50% 50%;
        }
        
        .bat2 {
                animation-direction: normal;
                animation: move2 15s infinite;
                animation-timing-function: ease-in-out;
                transform-origin: 50% 50%;
        }
        
        .wing {
                transform-origin: 50% 50%;
                animation-direction: normal;
                animation: wing 1s infinite;
                animation-timing-function: ease-in-out;
        }
        
        .wing1 {
                transform-origin: 50% 50%;
                animation-direction: normal;
                animation: wing1 1s infinite;
                animation-timing-function: ease-in-out;
        }
        
        @keyframes move {
                0% {
                        transform: translate(150px, 90px) rotate(10deg);
                }
                25% {
                        transform: translate(-150px, 90px) rotate(-10deg);
                }
                50% {
                        transform: translate(-160px, -80px) rotate(10deg);
                }
                75% {
                        transform: translate(-140px, -100px) rotate(-10deg);
                }
        
                100% {
                        transform: translate(150px, 90px) rotate(10deg);
                }
        }
        
        @keyframes move1 {
                0% {
                        transform: translate(-140px, -70px) rotate(-10deg);
                }
                25% {
                        transform: translate(0px, -50px) rotate(10deg);
                }
                50% {
                        transform: translate(150px, 50px) rotate(-10deg);
                }
                75% {
                        transform: translate(-100px, 30px) rotate(10deg);
                }
                85% {
                        transform: translate(-110px, 90px) rotate(10deg);
                }
        
                100% {
                        transform: translate.........完整代码请登录后点击上方下载按钮下载查看