css会眨眼的皮卡丘


<html>
	<head>
    	<meta charset="utf-8" />
        <title>j绝对定位</title>
        <style>
		
			body {
				background: -webkit-linear-gradient(top,#2B8BD2 0%,#59D2A5 100%);
				
			}
        	
			.face{
				width: 300px;
				height: 200px;
				border: 1px solid #ccc;
				margin: 200px auto;
				background-color: orange;
				position:relative;
			}
			
			.ear {
				width: 45px;
				height: 200px;
				background-color: orange;
				position: absolute;
				
				
			}
			
			
			.ear_left {
				transform: rotate(-38deg);
				top: -154px;
				left: -48px;
				border-radius: 56px 0 0 0;
			}
			
			
			.ear_right {
				transform: rotate(34deg);
				left: 301px;
				top: -160px;
				border-radius: 0 56px 0 0;
			}
			
			.ear_left .a {
				background-color: #000;
				width: 100%;
				height: 52px;
				border-radius: 56px 0 0 0;
			}
			
			.ear_right .a {
				background-color: #000;
				width: 100%;
				height: 52px;
				border-radius: 0 56px 0 0;
			}
			
			.eye_left {
				position:absolute;
				width:45px;
				height:45px;
				border-radius:50%;
				background:#222;
				left: 52px;
    			top: 48px;
				overflow:hidden;
			}
			
			.eye_left .ball_1 {
				position:absolute;
				width:16px;
				height:16px;
				border-radius:50%;
				background:#fff;
				top:26px;
				left:10px;
				
			}
			
			
			.eye_left .ball_2 {
				position:absolute;
				width:10px;
				height:10px;
				border-radius:50%;
				background:#fff;
				top:12px;
				left:28px;
				
			}
			
			
			.eye_right {
				position:absolute;
				width:45px;
				height:45px;
				border-radius:50%;
				background:#222;
				right: 52px;
    			top: 48px;
				overflow:hidden;
			}
			
			.eye_right .ball_1 {
				position:absolute;
				width:16px;
				height:16px;
				border-radius:50%;
				background:#fff;
				top:12px;
				left:5px;
				
			}
			
			
			.eye_right .ball_2 {
				position:absolute;
				width:10px;
				height:10px;
				border-radius:50%;
				background:#fff;
				top:26px;
				left:27px;
				
			}
			
			.norse {
				width: 13px;
				height: 9px;
				background: #000;
				position: absolute;
				bottom: 66px;
				left: 139px;
				border-radius: 0 0 6px 6px;
				
			}
			
			.mouth{
				width: 50px;
				height: 30px;
				background: #D80C32;
				position: absolute;
				border-radius: 0 0 20px 20px;
				left: 122px;
				bottom: 13px;
			}
			
			.lianjia_left {
				width: 40px;
				height: 40px;
				background: red;
				position: absolute;
				border-radius:50%;
				bottom:28px;
				left:20px;
				
			}
			
			.lianjia_right {
				width: 40px;
				height: 40px;
				background: red;
				position: absolute;
				border-radius:50%;
				bottom:28px;
				right:20px;
				
			}
			
			.blink {
				animation:blink_frames 5s infinite ease;

			}
			
			
			@keyframes blink_frames {
				
				0% {
					height:45px;
				}	
				
				40% {
					height:5px;
					top:75px;
				}
				
				80% {
					height:5px;
					top:75px;
				}
				
				100% {
					height:45px;
					top: 48px;
				}
				
			}
			
			
			
        	
        
        </style>
        
    </head>
    
    
    <body>
    	
        <div class='face'>
        
        	<div class='ear ear_left'>
            	<div class='a'></div>
            
            </div>
            
            
            <div class='ear ear_right'>
            	<div class='a'></div>
            
            </div>
            
            <div class='eye_left blink'>
            	<div class='ball_1'></div>
                <div class='ball_2'></div>
            
            </div>
            
            <div class='eye_right blink'>
           
            	<div class='ball_1'></div>
                <div class='ball_2'></div>
            
            </div>
            
            
            <div class='norse'></div>
            
            <div class='mouth'></div>
            
            <div class='lianjia_left'></div>
            <div class='lianjia_right'></div>
            
        	
        </div>
    
    </body>



</html>
posted on 2022-02-25 22:26 剽悍一小兔阅读(19) 评论(0) 收藏举报来源