EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

@import url(http://fonts.googleapis.com/css?family=Lobster);

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  background: rosybrown;
  font-family: Lobster !important;
  font-weight: normal;   
}

body{
  
}

.logo {
  width: 600px;
  height: 209px;
 background:url("http://misterbollock.com/files/images/logo.png");
  margin: 5% auto;
  position: relative;
  z-index: 10;
}

.bg {
  width: 600px; 
  height: 600px;
  background: url("http://misterbollock.com/files/images/rotator.png");
  margin: -18% auto;
  position: relative;
  -webkit-animation: rotate 8s linear infinite;
}

@-webkit-keyframes rotate {
    from{
        -webkit-transform: rotate(0deg);
    }
    to{
        -webkit-transform: rotate(360deg);
    }
}

/*Butchery of the radial-gradient styles here. I lifted them from Sketch App*/
#bollock {
  height: 144px;
  width:157px;
  border-radius: 100%;
  background-image: -o-radial-gradient(130% 130%, #8E5828 4%, #000000 100%);
  background-image: -moz-radial-gradient(130% 130%, #8E5828 4%, #000000 100%);
  background-image: -webkit-radial-gradient(130% 130%, #8E5828 4%, #000000 100%);
  background-image: -ms-radial-gradient(130% 130%, #8E5828 4%, #000000 100%);
  background-image: radial-gradient(130% 130%, #8E5828 4%, #000000 100%);
  position: relative;
  margin: -386px auto;
  z-index: 2;
}

#bollock:hover{
  cursor: pointer;
}
#bollock:hover .hair{
 -webkit-animation: rotate-anti 2s linear infinite;
}
@-webkit-keyframes rotate-anti {
    from{
        -webkit-transform: rotate(360deg);
    }
    to{
        -webkit-transform: rotate(0deg);
    }
}

.eye {
  height: 33px;
  width: 34px;
  margin-top:2px;
  margin-bottom: 9px;
  z-index:4;
  position:relative;
}
.pupil {
  width: 19px;
  height: 20px;
  border-radius: 100%;
  background: radial-gradient(65% 63%, #FFFFFF 1%, #633E1C 60%);
  margin-left: 8px;
  margin-top: 2px;
}
#left-eye {
  border-radius: 100%;
  background: #FFFFFF;
  margin-left: 35px;
  float: left;
}
#right-eye {
  border-radius: 100%;
  background: #FFFFFF;
  margin-right: 35px;
  float: right;
}
#mouf {
  width: 70px;
  height: 59px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  background: #623D1C;
  float: left;
  margin-left: 44px  
}
#bollock:hover {
 
}

.hair{
  position:relative;
  top:72px;
}

.hair li{
  position:absolute;
  list-style-type:none;
  left:74px;
  z-index:3;
}

.hair li::before{
  content:"";
  width: 2px;
  height:17px;
  background-color: black;
  position:absolute;
  bottom:72px;
}

.hair li::after{
  content:"";
  width: 2px;
  height:18px;
  background-color: black;
  position:absolute;
  bottom:-86px;
}

.hair li.hair1{-webkit-transform: rotate(0deg);}
.hair li.hair2{-webkit-transform: rotate(45deg);}
.hair li.hair3{-webkit-transform: rotate(90deg);}
.hair li.hair4{-webkit-transform: rotate(135deg);}
.hair li.hair5{-webkit-transform: rotate(22.5deg);}
.hair li.hair6{-webkit-transform: rotate(67.5deg);}
.hair li.hair7{-webkit-transform: rotate(112.5deg);}
.hair li.hair8{-webkit-transform: rotate(157.5deg);}

.float {
  -webkit-animation-name: Floating;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
}

@-webkit-keyframes Floating{
    from {-webkit-transform:translate(0, 0px);}
    55% {-webkit-transform:translate(0, 25px);}
    to {-webkit-transform: translate(0, -0px);    }    
}

h2 {
	font-size: 2em;
	margin-top: 420px;
	color: sienna;
  text-align: center;
	z-index: 11;

}

h3 {
  margin-top: -10px;
  text-align: center;
	font-size: 10em;
	color: whitesmoke;
	text-shadow: 0 1px 0 #ccc,
	               0 2px 0 #c9c9c9,
	               0 3px 0 #bbb,
	               0 4px 0 #b9b9b9,
	               0 5px 0 #aaa,
	               0 6px 1px rgba(0,0,0,.1),
	               0 0 5px rgba(0,0,0,.1),
	               0 1px 3px rgba(0,0,0,.3),
	               0 3px 5px rgba(0,0,0,.2),
	               0 5px 10px rgba(0,0,0,.25),
	               0 10px 10px rgba(0,0,0,.2),
	               0 20px 20px rgba(0,0,0,.15);
}

HTML

Recommendation

Join Effecthub.com