纯css实现一个蝙蝠侠卖萌跳舞动画效果代码-html代码-BFW代码库

纯css实现一个蝙蝠侠卖萌跳舞动画效果代码

代码语言：html

所属分类：动画

代码描述：纯css实现一个蝙蝠侠卖萌跳舞动画效果代码，无div布局，都是css代码。

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

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

<head>
    <meta charset="UTF-8">
    <style>
        html{
    
        /* ===style=== */
    
            height: 100%;
            display: flex;
            overflow: hidden;
            align-items: center;
            box-sizing: border-box;
            justify-content: center;
            background-color: black;
    
        /* ===style=== */
    
    
        /* ===colors=== */
    
            --purple: #42296b;
            --yellow: #fff75a;
            --pink: #8c6b8c;
            --l-pink: #6f4e8e;
            --cream: #f7ad94;
            --d-cream: #e88473;
            --d-blue: #1d1942;
            --d-red: #321018;
            --d-light: #f77363;
    
        /* ===colors=== */
    
    }
    
    html *,
    html *::before,
    html *::after{
      
        box-sizing: inherit;
      
    }
    
    body{
    
        /* ===style=== */
    
            margin: 0;
            width: 34em;
            height: 34em;
            display: flex;
            overflow: hidden;
            position: relative;
            align-items: center;
            justify-content: center;
            background-repeat: no-repeat;
            background-color: var(--d-light);
            animation-name: body , d-light ;
            animation-duration: .24s , .35s ;
            animation-direction: alternate , normal ;
            animation-iteration-count: infinite , infinite ;
            animation-timing-function: ease-in-out , linear ;
    
        /* ===style=== */
        
    
        background-image: 
        
    
        /* body-r====== */
           
            radial-gradient( 27.6em 35em at center 169% , transparent 90% , var(--purple) 90.3% , var(--purple) 94% , var(--d-light) 94.3% ) ,
        
        /*======body-r*/
    
        
        /* cape====== */
           
            radial-gradient( circle at center 12.5% , var(--purple) 43% , transparent 43.3%  ) ,
    
        /*======cape*/
        
        
        /* body====== */
           
            radial-gradient( 27.6em 35em at center 169% , var(--yellow) 43.2% , var(--pink) 43.5% , var(--pink) 90% ,  transparent 92.4% ) ;
        
        /*======body*/
    
        
        background-size:
    
    
        /* body-r====== */
    
            100% 20em ,
        
        /*======body-r
    
    
        /* cape====== */
    
            34.5em 29em ,
        
        /*======cape*/
    
    
        /* body====== */
    
            100% 20em ;
        
        /*======body*/
    
    
        background-position:
    
    
        /* body-r====== */  
        
            center 100% ,
    
        /*======body-r*/
    
    
        /* cape====== */  
        
            center 300% ,
    
        /*======cape*/
    
    
        /* body====== */  
        
            center 100% ;
    
        /*======body*/
    
       
    }
    
    
    @keyframes body {
    
        100%{
    
            background-position:
    
    
            /* body-r====== */  
            
                center 102.5% ,
        
            /* ======body-r */
        
        
            /* cape====== */  
            
                center 308% ,
        
            /* ======cape */
        
        
            /* body====== */  
            
                center 102.5% ;
        
            /* ======body */
    
        }
    }   
    
    @keyframes d-light {
        
        50%{
    
            --d-light: #f77b39;
            --purple: #29316b;
            --pink: #637b9c;
            --l-pink: #637b9c;
            --d-cream: #d19388;
            --cream: #e7b59c;
            --d-blue: #101842;
            --d-red: #28181c;
            --yellow: #fffc63;
    
        }
    
        100%{
    
            --d-light: #f77b39;
            --purple: #353259;
            --pink: #7b737b;
            --l-pink: #68658b;
            --d-cream: #dd8c5a;
            --cream: #f7b57b;
            --d-blue: #181839;
            --d-red: #2c120b;
            --yellow: #fff752;
    
        }
    }
    
    body::before{
    
        /* ===style=== */
    
            top: 11.8%;
            content: "";
            width: 12.35em;
            height: 24.4em;
            position: absolute;
            background-repeat: no-repeat;
            animation: head .6s infinite linear;
    
        /* ===style=== */
        
    
    
        background-image:
    
    
 .........完整代码请登录后点击上方下载按钮下载查看