LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

CSS vs. SVG

CSS
@import url(https://fonts.googleapis.com/css?family=Lato:300);
@import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
* {
  box-sizing: border-box;
}

body {
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
}

h1 {
  color: #0845A2;
  font-size: 3.5em;
  position: relative;
  text-align: center;
  margin-top: 1em;
  font-weight: 700;
  z-index: 999;
}

.css-wrapper {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  left: 0;
  background: #F7D568;
  border-right: 1px solid #fff;
  z-index: 0;
}
.css-wrapper .drinking-man {
  margin: 25% auto;
  position: relative;
  width: 100px;
}
.css-wrapper .head {
  width: 50px;
  height: 125px;
  background: #E79E8A;
  position: relative;
  margin-top: 0px;
  margin-left: 25px;
  border-radius: 30px 30px 30px 25px;
  z-index: 10;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-animation: move 4.5s linear infinite;
          animation: move 4.5s linear infinite;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.css-wrapper .head::before {
  content: "";
  width: 11px;
  height: 11px;
  background: #E79E8A;
  position: absolute;
  border-radius: 50%;
  margin-top: 22px;
  margin-left: -7px;
  box-shadow: 52px 0 0 #E79E8A;
}
.css-wrapper .head::after {
  content: "";
  width: 25px;
  height: 10px;
  background: #612410;
  position: absolute;
  margin-left: 12px;
  margin-top: 0px;
  border-radius: 0px 0 10px 10px;
  box-shadow: inset 0 -3px 0 #4E1C0C;
  z-index: 100;
}
.css-wrapper .hair {
  width: 54px;
  height: 35px;
  background: #612410;
  position: absolute;
  border-radius: 20px 20px 0px 0px;
  margin-left: 23px;
  margin-top: -4px;
  -webkit-animation: hair 4.5s linear infinite;
          animation: hair 4.5s linear infinite;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.css-wrapper .glasses {
  width: 23px;
  height: 13px;
  position: absolute;
  background: rgba(52, 67, 115, 0.8);
  margin-top: 20px;
  margin-left: 0px;
  border-radius: 0px 0px 10px 10px;
  box-shadow: 28px 0 0 rgba(52, 67, 115, 0.8);
}
.css-wrapper .glasses::after {
  content: "";
  width: 5px;
  height: 2px;
  background: #354E72;
  position: absolute;
  margin-left: 23px;
}
.css-wrapper .bear {
  width: 57px;
  height: 57px;
  border-radius: 50%;
  background: #612410;
  box-shadow: inset 0px -13px 0 #4E1C0C;
  border: 2px solid #4E1C0C;
  position: absolute;
  margin-top: 38px;
  margin-left: -4px;
}
.css-wrapper .right-arm {
  width: 20px;
  height: 150px;
  position: absolute;
  background: -webkit-linear-gradient(top, #E7AE9A, #E79E8A);
  background: linear-gradient(top, #E7AE9A, #E79E8A);
  background: -moz-linear-gradient(top, #E7AE9A, #E79E8A);
  margin-left: 80px;
  margin-top: -55px;
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  z-index: -1;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  -webkit-animation: rightarm 4.5s linear infinite;
          animation: rightarm 4.5s linear infinite;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.css-wrapper .right-arm::after {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #E79E8A;
  position: absolute;
  margin-top: 140px;
  margin-left: -10px;
  box-shadow: inset 5px 0 0 #e38c75;
}
.css-wrapper .arm {
  width: 20px;
  height: 80px;
  background: #E7AE9A;
  position: absolute;
  margin-top: -65px;
  margin-left: 3px;
  border-radius: 0px 0px 30px 30px;
  -webkit-transform: rotate(55deg);
          transform: rotate(55deg);
  -webkit-transform-origin: top center;
          transform-origin: top center;
  z-index: 20;
  -webkit-animation: arm 4.5s linear infinite;
          animation: arm 4.5s linear infinite;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.css-wrapper .left-arm {
  width: 95px;
  height: 20px;
  position: absolute;
  background: #E79E8A;
  margin-left: 0px;
  margin-top: 60px;
  border-radius: 30px 0px 0px 30px;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transform-origin: 0;
          transform-origin: 0;
  -webkit-animation: drink 4.5s linear infinite;
          animation: drink 4.5s linear infinite;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
  z-index: 10;
}
.css-wrapper .left-arm::after {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #E79E8A;
  position: absolute;
  margin-top: -8px;
  margin-left: 85px;
  box-shadow: inset -5px 0 0 #e38c75;
}
.css-wrapper .left-arm::before {
  content: "";
  width: 25px;
  height: 42px;
  background: -webkit-linear-gradient(left, #FFD02D 20%, #FFE270 80%);
  background: linear-gradient(left, #FFD02D 20%, #FFE270 80%);
  background: -moz-linear-gradient(left, #FFD02D 20%, #FFE270 80%);
  position: absolute;
  margin-left: 95px;
  margin-top: -30px;
  border-radius: 5px 5px 10px 10px;
  border-top: 8px solid white;
  border-bottom: 2px solid #F3D7C9;
  border-left: 2px solid #F3D7C9;
  border-right: 2px solid #F3D7C9;
  -webkit-transform: rotate(-40deg);
          transform: rotate(-40deg);
  -webkit-animation: beer 4.5s linear infinite;
          animation: beer 4.5s linear infinite;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.css-wrapper .body {
  position: relative;
  width: 55px;
  height: 70px;
  background: #EFBAAA;
  top: 40px;
  left: 22px;
  z-index: 1;
  box-shadow: inset 20px 0 0 #E7AE9A;
}
.css-wrapper .body::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: #E79A9A;
  border-radius: 50%;
  top: -20px;
  left: 4px;
  box-shadow: 40px 0 0 #E79A9A;
}
.css-wrapper .body::before {
  content: "";
  width: 100px;
  height: 100px;
  background: #E7AE9A;
  border-radius: 50%;
  position: absolute;
  margin-bottom: -30px;
  bottom: 100%;
  left: -21px;
  box-shadow: inset -10px 0px 0px #EFBAAA;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  -webkit-animation: move 4.5s linear infinite;
          animation: move 4.5s linear infinite;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.css-wrapper .pants {
  width: 55px;
  height: 30px;
  background: #3D5E8C;
  border-radius: 0px 0px 30px 30px;
  margin-top: 38px;
  margin-left: 22px;
  box-shadow: inset -11px -5px 0 #2E4A72;
  position: relative;
  z-index: 10;
}
.css-wrapper .pants::before {
  content: "";
  width: 15px;
  height: 50px;
  position: absolute;
  background: #3D5E8C;
  margin-left: 3px;
  margin-top: 15px;
  box-shadow: 34px 0 0 #2E4A72;
}
.css-wrapper .legs {
  width: 12px;
  height: 175px;
  background: #E7AE9A;
  position: absolute;
  margin-top: 65px;
  margin-left: 4px;
  box-shadow: 34px 0 0 #EFBAAA;
}
.css-wrapper .legs::before {
  content: "";
  width: 32px;
  height: 10px;
  background: #E7AE9A;
  position: absolute;
  margin-top: 175px;
  margin-left: -20px;
  box-shadow: 0 2px 0 #e29d85;
  border-radius: 10px 0px 0px 10px;
}
.css-wrapper .legs::after {
  content: "";
  width: 32px;
  height: 10px;
  background: #EFBAAA;
  position: absolute;
  margin-top: 175px;
  margin-left: 34px;
  box-shadow: 0 2px 0 #eba995;
  border-radius: 0px 10px 10px 0px;
}

.svg-wrapper {
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  left: 50%;
  background: #F7D568;
  z-index: 0;
}

#drinkingMan {
  margin: 24% auto;
  display: block;
}

#chest-area {
  position: relative;
}

.foot-shadow2 {
  fill: #E29D85;
}

.hand-shadow {
  fill: #E38C75;
}

.nipple {
  fill: #E79A9A;
}

.skinDark {
  fill: #E79E8A;
}

.skin {
  fill: #E7AE9A;
}

.hair-shadow {
  fill: #4E1C0C;
}

.foot-shadow {
  fill: #EBA995;
}

.skinShadow {
  fill: #EFBAAA;
}

.pants-shadow {
  fill: #2E4A72;
}

.hair {
  fill: #612410;
}

.beer-foam {
  fill: #FFFFFF;
}

.glasses {
  fill: #354E72;
}

.bear-shadow {
  fill: #4E1C0C;
  stroke: #4E1C0C;
}

.bear-hair {
  fill: #612410;
  stroke: #4E1C0C;
}

.pants {
  fill: #3D5E8C;
}

.beer {
  fill: url(#SVGID_1_);
  stroke: #F3D7BF;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

@-webkit-keyframes arm {
  0% {
    -webkit-transform: rotate(55deg) translateY(-8px);
            transform: rotate(55deg) translateY(-8px);
  }
  12% {
    -webkit-transform: rotate(110deg) translateY(-12px);
            transform: rotate(110deg) translateY(-12px);
  }
  30% {
    -webkit-transform: rotate(110deg) translateY(-12px);
            transform: rotate(110deg) translateY(-12px);
  }
  55% {
    -webkit-transform: rotate(55deg) translateY(-5px);
            transform: rotate(55deg) translateY(-5px);
  }
}

@keyframes arm {
  0% {
    -webkit-transform: rotate(55deg) translateY(-8px);
            transform: rotate(55deg) translateY(-8px);
  }
  12% {
    -webkit-transform: rotate(110deg) translateY(-12px);
            transform: rotate(110deg) translateY(-12px);
  }
  30% {
    -webkit-transform: rotate(110deg) translateY(-12px);
            transform: rotate(110deg) translateY(-12px);
  }
  55% {
    -webkit-transform: rotate(55deg) translateY(-5px);
            transform: rotate(55deg) translateY(-5px);
  }
}
@-webkit-keyframes drink {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  12% {
    -webkit-transform: rotate(-90deg) translateX(-10px) translateY(10px);
            transform: rotate(-90deg) translateX(-10px) translateY(10px);
  }
  30% {
    -webkit-transform: rotate(-110deg) translateX(-10px) translateY(10px);
            transform: rotate(-110deg) translateX(-10px) translateY(10px);
  }
  55% {
    -webkit-transform: rotate(0deg) translateX(0px) translateY(8px);
            transform: rotate(0deg) translateX(0px) translateY(8px);
  }
}
@keyframes drink {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  12% {
    -webkit-transform: rotate(-90deg) translateX(-10px) translateY(10px);
            transform: rotate(-90deg) translateX(-10px) translateY(10px);
  }
  30% {
    -webkit-transform: rotate(-110deg) translateX(-10px) translateY(10px);
            transform: rotate(-110deg) translateX(-10px) translateY(10px);
  }
  55% {
    -webkit-transform: rotate(0deg) translateX(0px) translateY(8px);
            transform: rotate(0deg) translateX(0px) translateY(8px);
  }
}
@-webkit-keyframes beer {
  0% {
    -webkit-transform: rotate(-40deg) translateX(0);
            transform: rotate(-40deg) translateX(0);
  }
  20% {
    -webkit-transform: rotate(3deg) translateX(6px);
            transform: rotate(3deg) translateX(6px);
  }
  30% {
    -webkit-transform: rotate(3deg) translateX(6px);
            transform: rotate(3deg) translateX(6px);
  }
  50% {
    -webkit-transform: rotate(-40deg) translateX(0);
            transform: rotate(-40deg) translateX(0);
  }
}
@keyframes beer {
  0% {
    -webkit-transform: rotate(-40deg) translateX(0);
            transform: rotate(-40deg) translateX(0);
  }
  20% {
    -webkit-transform: rotate(3deg) translateX(6px);
            transform: rotate(3deg) translateX(6px);
  }
  30% {
    -webkit-transform: rotate(3deg) translateX(6px);
            transform: rotate(3deg) translateX(6px);
  }
  50% {
    -webkit-transform: rotate(-40deg) translateX(0);
            transform: rotate(-40deg) translateX(0);
  }
}
@-webkit-keyframes move {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  20% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  30% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes move {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  20% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  30% {
    -webkit-transform: rotate(3deg);
            transform: rotate(3deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes hair {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  20% {
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
  }
  30% {
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
  }
  50% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@keyframes hair {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
  20% {
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
  }
  30% {
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
  }
  50% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@-webkit-keyframes rightarm {
  0% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
  20% {
    -webkit-transform: rotate(-12deg);
            transform: rotate(-12deg);
  }
  30% {
    -webkit-transform: rotate(-12deg);
            transform: rotate(-12deg);
  }
  50% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
}
@keyframes rightarm {
  0% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
  20% {
    -webkit-transform: rotate(-12deg);
            transform: rotate(-12deg);
  }
  30% {
    -webkit-transform: rotate(-12deg);
            transform: rotate(-12deg);
  }
  50% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
}
.footer--love {
  position: absolute;
  right: 1.5rem;
  bottom: 2.5rem;
  font-size: 0.85rem;
  font-family: 'Lato', sans-serif;
  z-index: 9999;
}
.footer--love .love-heart {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/42764/heart-smil.svg);
  width: 16px;
  height: 16px;
  display: inline-block;
  margin: 0 5px 0 0;
  vertical-align: middle;
}
.footer--love a {
  color: #43abf0;
}
JS
$(document).ready(function(){
	
  var s = Snap('#drinkingMan');
  var leftHand = s.select('#left-hand');
  var beer = s.select('#beer');
  var leftArm = s.select('#left-arm');
  var rightArm = s.select('#right-arm');
  var body = s.select('#body');
  var head = s.select('#head');
  
 
  
  var myMatrix = new Snap.Matrix();
  myMatrix.rotate(55,0,0);
  //myMatrix.translate(80,-130);
  
drink();

 function drink() {

  leftArm.stop().animate(
    {transform:'r65,70,150'}
    ,800, 
    function(){ 
				leftArm.animate(
          { transform: 'r70,70,150'},
          800, 
       		function(){ 
						leftArm.animate(
              { transform: 'r0,70,150'},
              800
            );					
					}
    );}
  ); 

    leftHand.stop().animate(
    {transform:'r-110,13,185' },
    800, 
    function(){  
				leftHand.animate(
          { transform: 'r-115,13,185'},
          800,
          function() {
          	leftHand.animate(
          { transform: 'r0,13,185'},
          800);
   
        }
          );						
			}              
  );

  body.animate(
    {transform:'r3, 100,240'},
    800,
    function(){ 
     body.animate(
       {transform:'r3, 100,240'},
       800,
  		 function(){ 
     			body.animate(
            {transform:'r0, 100,240'},
            800
          );
   		 } 
     );
    }             
  );
    
	head.animate(
     {transform:'r3, 100,240'},
     800,
     function(){ 
     		head.animate(
          {transform:'r3, 100,240'},
          800,
  				function(){ 
    			 head.animate(
             {transform:'r0, 100,240'},
             800
           );
   				} 
        );
     }             
  );
  
   rightArm.stop().animate(
     {transform: 'r5, 180, 180'},
     800, 
     function() {
    		rightArm.stop().animate(
          {transform: 'r5, 180, 180'},
          800,
          function() {
              rightArm.stop().animate(
                {transform: 'r0, 180, 180'},
                800
              );
           }
        );
  	 }
   );
   
   beer.stop().animate(
     {transform:'r40,80,255' },
     800,
   	 function(){  
					beer.animate(
            { transform: 'r35,80,255'},
            800,
            function(){
            		beer.stop().animate(
                  { transform: 'r0,80,255'},
                  800
                );
            }
          );             			
			}                        
   );
   
   

 }//end drink  
  
 setInterval(function(){ drink() }, 4500);


  
  
  
});

Description

inspired on dribble https://dribbble.com/shots/1781876-Be-careful-with-the-ball?list=users&offset=2
Term
Mon, 11/27/2017 - 21:31

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv