Bear

by Pranab Dey

HTML

<div class="bear">
		<div class="ear1"></div>
    <div class="ear2"></div>
  <div class="head">
    <div class="eye1"></div>
    <div class="eye2"></div>
		<div class="circle">
			<div class="nose"></div>
    	<div class="mouth"></div>
		</div>
  </div>
</div>

SCSS

.eyeStyle{
	width: 18px; height: 18px; background: #20181d; position: absolute;
}
.earStyle{
	width: 35px; height: 35px;top: 10%; box-shadow: 0px 0px 0px 6px #222; position: absolute; background: #997a6b;
}

body{
	background: lighten(#4a2d20,20%);
}
.bear{
	position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
	
	.ear1{
			@extend .earStyle; left: 0%; border-radius: 80px 80px 40px 80px;
		}
		.ear2{
			@extend .earStyle; right: 0%; border-radius: 80px 80px 80px 40px;
		}

	.head{
		width: 150px; height: 150px; border-radius: 50%;background: linear-gradient(to top left, #a08276, lighten(#4a2d20,20%), #997a6b);position: relative;box-shadow: inset 0px 0px 10px #555;

		.eye1{
			@extend .eyeStyle; left: 20%; top: 30%; border-radius: 40px 80px 80px 80px; box-shadow: inset 1px -1px 5px #000, 0px 0px 15px #222; animation: bearAn1 3s 2s linear infinite;
		&:before{
			content:'';width: 9px; height: 9px; background: lighten(#000,20%); position: absolute;border-radius: 50%;top: 32%;left: 23%; z-index: 2; 
		}
		}
		.eye2{
			@extend .eyeStyle; right: 25%; top: 30%; border-radius: 80px 40px 80px 80px;box-shadow: inset 1px -1px 5px #000, 0px 0px 15px #222; animation: bearAn 3s 2s linear infinite;
		&:before{
			content:'';width: 9px; height: 9px; background: lighten(#000,20%); position: absolute;border-radius: 50%;top: 32%;right: 22%; z-index: 3;
			
		}
		}
		.circle{
			background: lighten(#a08276, 20%); width:80px; height: 80px; position: absolute; border-radius: 50%; top: 40%;right: 25%;box-shadow: inset 1px -1px 5px #000;
			.nose{
				width: 25px; height: 25px; background: #20181d; position: absolute;right: 35%; top: 30%; border-radius: 10px;
			}
			.mouth{
				width: 25px; height: 25px; background: linear-gradient(to bottom, transparent 50%, #20181d 50%); position: absolute;right: 35%; top: 60%; border-radius: 10px;
			}
		}
	}
}

@keyframes bearAn{
	0%{
		right: 25%; top: 30%;
	}
	50%{
		top: 27%;right: 28%;
	}
	100%{
		right: 25%; top:...