EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

.owl {
  position: absolute;
  top: 5%;
  left: 50%;
  margin-left: -200px;
  height: 400px;
  width: 325px;
}

.head {
  width: 325px;
  height: 230px;
  border-radius: 50%;
  position: absolute;
  background-color: #f8af1f;
}

.eye {
  position: absolute;
  top: 45px;
  width: 76px;
  height: 110px;
  background: #eee;
  border-radius: 50%;
  box-shadow: 0 0 0 8px #f89b1f, 
        inset 0 0 0 5px #777, 
        inset 0 0 0 25px #8cbf26, 
        inset 0 0 0 200px #666666;
  border: 5px dotted #f89b1f;
}

.eye.left {
  left: 26px;
}
.eye.right {
  right: 26px;
}

/* For starish eyes */
.eye .eye-inset {
  height: 0;
  width: 0;
  border: 20px solid transparent;
  border-right-color: #aadaed;
  position: absolute;
  top: 56px;
  left: 38px;
	list-style: none;
  -webkit-transform-origin: 20px 0px;
  -ms-transform-origin: 20px 0px;
  transform-origin: 20px 0px;
}
.tr1 {
  -webkit-transform: rotate(260deg);
  -ms-transform: rotate(260deg);
  transform: rotate(260deg);
}
.tr2 {
  -webkit-transform: rotate(160deg);
  -ms-transform: rotate(160deg);
  transform: rotate(160deg);
}
.tr3 {
  -webkit-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  transform: rotate(60deg);
}
.tr4 {
  -webkit-transform: rotate(-40deg);
  -ms-transform: rotate(-40deg);
  transform: rotate(-40deg);
}
.tr5 {
  -webkit-transform: rotate(-140deg);
  -ms-transform: rotate(-140deg);
  transform: rotate(-140deg);
}
.tr6 {
  -webkit-transform: rotate(-240deg);
  -ms-transform: rotate(-240deg);
  transform: rotate(-240deg);
}
.tr7 {
  -webkit-transform: rotate(-340deg);
  -ms-transform: rotate(-340deg);
  transform: rotate(-340deg);
}
.tr8 {
  -webkit-transform: rotate(-440deg);
  -ms-transform: rotate(-440deg);
  transform: rotate(-440deg);
}
.tr9 {
  -webkit-transform: rotate(-540deg);
  -ms-transform: rotate(-540deg);
  transform: rotate(-540deg);
}
.tr10 {
  -webkit-transform: rotate(-640deg);
  -ms-transform: rotate(-640deg);
  transform: rotate(-640deg);
}
.tr11 {
  -webkit-transform: rotate(-740deg);
  -ms-transform: rotate(-740deg);
  transform: rotate(-740deg);
}
.tr12 {
  -webkit-transform: rotate(-840deg);
  -ms-transform: rotate(-840deg);
  transform: rotate(-840deg);
}
.tr13 {
  -webkit-transform: rotate(-940deg);
  -ms-transform: rotate(-940deg);
  transform: rotate(-940deg);
}
.tr14 {
  -webkit-transform: rotate(-1040deg);
  -ms-transform: rotate(-1040deg);
  transform: rotate(-1040deg);
}
.tr15 {
  -webkit-transform: rotate(-1140deg);
  -ms-transform: rotate(-1140deg);
  transform: rotate(-1140deg);
}
.tr16 {
  -webkit-transform: rotate(-1240deg);
  -ms-transform: rotate(-1240deg);
  transform: rotate(-1240deg);
}
.tr17 {
  -webkit-transform: rotate(-1340deg);
  -ms-transform: rotate(-1340deg);
  transform: rotate(-1340deg);
}
.tr18 {
  -webkit-transform: rotate(-1440deg);
  -ms-transform: rotate(-1440deg);
  transform: rotate(-1440deg);
}
.tr19 {
  -webkit-transform: rotate(-1540deg);
  -ms-transform: rotate(-1540deg);
  transform: rotate(-1540deg);
}
.tr20 {
  -webkit-transform: rotate(-1640deg);
  -ms-transform: rotate(-1640deg);
  transform: rotate(-1640deg);
}

.beak {
  height: 0;
  width: 0;
  border: 32px solid transparent;
  border-top: 60px solid #666666;
  position: absolute;
  top: 135px;
  left: 131px;
}

.beak:after {
  content: "";
  height: 68px;
  width: 64px;
  border-radius: 50%;
  display: block;
  background-color: #666666;
  position: absolute;
  top: -100px;
  left: 50%;
	margin-left: -32px;
}

.body {
  height: 350px;
  width: 325px;
  background-color: #f89b1f;
  border-radius: 50%;
  position: absolute;
  top: 50px;
}

.body:after {
  height: 275px;
  width: 250px;
  content: "";
/*  display: block;*/
  position: absolute;
  border-radius: 50%;
  bottom: 5px;
  left: 37px;
  box-shadow: inset 0 0 0 10px #666666;
  background-image: -webkit-radial-gradient(circle at 0% -45%, #777777 24%, #8cbf26 25%, #8cbf26 28%, #777777 29%, #777777 36%, #8cbf26 36%, #8cbf26 40%, transparent 40%, transparent), 
										-webkit-radial-gradient(circle at 100% -45%, #777777 24%, #8cbf26 25%, #8cbf26 28%, #777777 29%, #777777 36%, #8cbf26 36%, #8cbf26 40%, transparent 40%, transparent), 
										-webkit-radial-gradient(circle at 50% 0%, #8cbf26 10%, #777777 11%, #777777 23%, #8cbf26 24%, #8cbf26 30%, #777777 31%, #777777 43%, #8cbf26 44%, #8cbf26 50%, #777777 51%, #777777 63%, #8cbf26 64%, #8cbf26 71%, transparent 71%, transparent), 
										-webkit-radial-gradient(circle at 0% 50%, #8cbf26 5%, #777777 6%, #777777 15%, #8cbf26 16%, #8cbf26 20%, #777777 21%, #777777 30%, #8cbf26 31%, #8cbf26 35%, #777777 36%, #777777 45%, #8cbf26 46%, #8cbf26 49%, transparent 50%, transparent), 
										-webkit-radial-gradient(circle at 100% 50%, #8cbf26 5%, #777777 6%, #777777 15%, #8cbf26 16%, #8cbf26 20%, #777777 21%, #777777 30%, #8cbf26 31%, #8cbf26 35%, #777777 36%, #777777 45%, #8cbf26 46%, #8cbf26 49%, transparent 50%, transparent);
  background-image: radial-gradient(circle at 0% -45%, #777777 24%, #8cbf26 25%, #8cbf26 28%, #777777 29%, #777777 36%, #8cbf26 36%, #8cbf26 40%, transparent 40%, transparent), 
										radial-gradient(circle at 100% -45%, #777777 24%, #8cbf26 25%, #8cbf26 28%, #777777 29%, #777777 36%, #8cbf26 36%, #8cbf26 40%, transparent 40%, transparent), 
										radial-gradient(circle at 50% 0%, #8cbf26 10%, #777777 11%, #777777 23%, #8cbf26 24%, #8cbf26 30%, #777777 31%, #777777 43%, #8cbf26 44%, #8cbf26 50%, #777777 51%, #777777 63%, #8cbf26 64%, #8cbf26 71%, transparent 71%, transparent), 
										radial-gradient(circle at 0% 50%, #8cbf26 5%, #777777 6%, #777777 15%, #8cbf26 16%, #8cbf26 20%, #777777 21%, #777777 30%, #8cbf26 31%, #8cbf26 35%, #777777 36%, #777777 45%, #8cbf26 46%, #8cbf26 49%, transparent 50%, transparent), 
										radial-gradient(circle at 100% 50%, #8cbf26 5%, #777777 6%, #777777 15%, #8cbf26 16%, #8cbf26 20%, #777777 21%, #777777 30%, #8cbf26 31%, #8cbf26 35%, #777777 36%, #777777 45%, #8cbf26 46%, #8cbf26 49%, transparent 50%, transparent);
  background-size: 75px 35px;
	background-color: #777777;
}

.feet {
  position: absolute;
  bottom: -15px;
  height: 45px;
  width: 15px;
  background-color: #999;
  border-radius: 50%;
}

.feet.left {
  left: 100px;
}

.feet.left:before {
  height: 32px;
  left: -13px;
  bottom: 5px;
}
.feet.left:after {
  height: 35px;
  right: -13px;
}
.feet.right {
  right: 100px;
}
.feet.right:before {
  height: 35px;
  left: -13px;
}
.feet.right:after {
  height: 32px;
  right: -13px;
  bottom: 5px;
}
.feet:before,
.feet:after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 15px;
  background-color: #999;
  border-radius: 50%;
}

.branch {
  height: 20px;
  width: 515px;
  background: #a05000;
  position: absolute;
  bottom: -5px;
  left: -100px;
}

.shadow, .shadow2 {
	background-color: rgba(0,0,0,.2);
	position: absolute;
	border-radius: 50%;
}
.shadow {
	width: 200px;
	height: 40px;	
	bottom: 0px;
	right: -20px;
}
.shadow2 {
	width: 230px;
	height: 100px;
	right: 9px;
	top:120px;
}

HTML

</div>

Recommendation

Join Effecthub.com