H5用css3写一个火柴人来回奔跑

效果地址 https://htmlzhoyan.github.io/Matchstick/

image.png

    
        
        
        
        
            html,body{                width: 100%;                height: 100%;                margin: 0;                padding: 0;                border: 0;
                
            }            #container{                width: 1000px;                height: 400px;                background: darkcyan;                margin: 100px auto;                position:relative;                overflow: hidden;
            
            }            .man{                position: absolute;                width: 60px;                height: 200px;        
                bottom: 0;                left: 10px;                animation: buffer 10s linear infinite;                perspective: 700px;
                
                
            }            .man1{                left: 80px;
            }            .man2{                left: 150px;    
            }            .man3{                left: 220px;    
            }            .man4{                left: 290px;
            }
            @keyframes buffer{
                0%{transform:translateX(0px);}
                50%{transform: translateX(950px);}
                100%{transform:translateX(0px);}
            
            }            
        
            
            
            
            .top{                width: 50px;                height: 50px;                border: 1px solid #000;                border-radius: 50px;                position: absolute;                left: 5px;                top: 0;                background: #000;                animation: buffe 10s steps(1,end) infinite;
            
            }
            
            @keyframes buffe{
                0%{transform:rotate(0deg);}
                50%{transform:rotate(150deg);}
                100%{transform:rotate(0deg);}
            }            
            
            .top:before{                content: '';                display: inline-block;                background: #000;                width: 10px;                height: 10px;                border-radius: 10px;                position: absolute;                left: 25px;                top: 15px;                border: 5px solid#ccc;
            }            .top:after{                content: '';                display: inline-block;                border: 5px solid #008B8B;                position: absolute;                left: 45px;                top: 30px;                border-left:20px solid #000;                transform: rotate(10deg);
                
            }            .center{                width: 50px;                height: 100px;                position: absolute;                left: 5px;                top: 50px;                border-radius: 30px;                transform-style: preserve-3d;                transform: rotateY(85deg);                animation: funmove 0.5s step-end infinite;
                
            }
            @keyframes funmove{
                0%{transform: rotateY(85deg)}
                25%{transform: rotateY(0deg)}
                50%{transform: rotateY(-50deg)}
                75%{transform: rotateY(-85deg);}
                100%{transform: rotateY(85deg);}

            }            .item{                width: 50px;                height: 100px;                
                position: absolute;                background: rgba(88,213,20,0.8);                font-weight: 900;                border-radius: 30px;
            
            }            .front{                transform:translateZ(20px);
            }            .back{                transform:translateZ(-20px) rotateY(180deg);
            }        
            .left{                transform:rotateY(-90deg) translateZ(20px);
            }            .right{                transform:rotateY(90deg) translateZ(20px);
            }            .footer1{       
                width: 5px;                height: 100px;                background: #000;                position: absolute;                bottom: 0;                left: 20px;                transform: rotate(20deg);                transform-origin: 100% 0;                animation: mMove1 1s linear infinite;
            }            .man:before{                content: '';                display: inline-block;                width: 5px;                height: 80px;                background: #000;                position: absolute;                bottom: 50px;                left: 10px;                transform: rotate(-10deg);                transform-origin: 100% 0;                animation: mMove2 1s linear infinite;
                
            }            .man:after{                content: '';                display: inline-block;                width: 5px;                height:80px;                background: #000;                position: absolute;                bottom: 50px;                left: 40px;                transform: rotate(-10deg);                transform-origin: 100% 0;                animation: mMove1 1s linear infinite;
            }
            @keyframes mMove1{
                0%{transform:rotate(20deg);}
                50%{transform: rotate(-10deg);}
                100%{transform: rotate(20deg);}
            
            }            .footer2{                width: 5px;                height: 100px;                background: #000;                position: absolute;                bottom: 0;                right: 20px;                transform: rotate(-20deg);                transform-origin: 100% 0;                animation: mMove2 1s linear infinite;
            }
            @keyframes mMove2{
                0%{transform:rotate(-20deg);}
                50%{transform: rotate(10deg);}
                100%{transform: rotate(-20deg);}
            
            }        
    
    
        
            
                
                    
                
                
                    
                    
                    
                    
                
                
                    
                
                
                    
                
            
            
                
                    
                
                
                    
                    
                    
                    
                
                
                    
                
                
                    
                
            
            
                
                    
                
                
                    
                    
                    
                    
                
                
                    
                
                
                    
                
            
            
                
                    
                
                
                    
                    
                    
                    
                
                
                    
                
                
                    
                
            
            
                
                    
                
                
                    
                    
                    
                    
                
                
                    
                
                
                    
                
            
        
    

作者：吃盖浇饭
链接：https://www.jianshu.com/p/01282dc7923f