Pure CSS 😡/🤬

index.html

<h1>Hover on me for animation!</h1>
<div class="head">
   
   <div class="face">
      <div class="mouth"></div>
      <div class="left-eye"></div>
      <div class="right-eye"></div>
      <div class="censor"></div>
   </div>
</div>

pure-css.markdown

Pure CSS 😡/🤬

Pure CSS "angry" emoji.

By CurleyWebDev

License.

script.js

style.css

@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
:root{
   --faded-black: rgba(0, 0, 0, .3);
}
body{
   background:-webkit-gradient(linear, left top, left bottom, color-stop(20%, darkred), color-stop(50%, black));
   background:linear-gradient(darkred 20%, black 50%);
   background-repeat:no-repeat;
   padding:0 30px;

}
h1{ width:100%;
   text-align:center;
   font-weight:700; 
   font-size:3em;
   font-family:arial; 
   color:white; 
   background: black; border:2px solid white;
   -webkit-box-shadow:0 5px 10px 2px black;
           box-shadow:0 5px 10px 2px black;
   position:relative;
}
.head{
   position:relative;
   width:250px;
   height:250px;
   background:radial-gradient(yellow 10%, red, transparent);
   border-radius:50%;
   margin:100px auto;
}
.head:before{
   content:"";
   position:absolute;
   top:1%;
   left:0;
   width:100%;
   height:100%;
   border-radius:50%;
   background:radial-gradient(circle at 50% 0, yellow 5%, red, transparent 70%);
   -webkit-filter:blur(5px);
           filter:blur(5px);
   z-index:2;
}

.left-eye {
  z-index: 3;
  width: 30px;
  height: 40px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #121212), color-stop(90%, transparent));
  background: linear-gradient(#121212 30%, transparent 90%);
  border-radius: 50%;
  position: absolute;
  top: 105px;
  left: 75px;
  -webkit-box-shadow: inset 0 5px 10px 5px black;
          box-shadow: inset 0 5px 10px 5px black;
  -webkit-animation: wink 4s linear infinite;
          animation: wink 4s linear infinite;
}

.left-eye:before {
  content: "";
  z-index: 3;
  width: 47px;
  height: 15px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, black), color-stop(70%, transparent));
  background: linear-gradient(black 50%, transparent 70%);
  border-radius: 50%;
  position: absolute;
  top: -10px;
  left: -13px;
  -webkit-transform: rotateZ(25deg);
          transform: rotateZ(25deg);
}

.right-eye {
  z-index: 3;
  width: 30px;
  height: 40px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #121212), color-stop(90%, transparent));
  background: linear-gradient(#121212 50%, transparent 90%);
  border-radius: 50%;
  position: absolute;
  -webkit-box-shadow: inset 0 5px 10px 5px black;
          box-shadow: inset 0 5px 10px 5px black;
  top: 105px;
  right: 75px;
  -webkit-animation: wink 4s linear infinite;
          animation: wink 4s linear infinite;
}

.right-eye:before {
  content: "";
  z-index: 3;
  width: 47px;
  height: 15px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, black), color-stop(70%, transparent));
  background: linear-gradient(black 50%, transparent 70%);
  border-radius: 50%;
  position: absolute;
  top: -10px;
  right: -13px;
  -webkit-transform: rotateZ(-25deg);
          transform: rotateZ(-25deg);
}
.mouth {
  z-index: 3;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at 50% 100%, transparent 70%, black 70%, var(--faded-black)80%, black 90%);
  border-radius: 50%;
  position: relative;
  top: 160px;
  left: 85px;
}
.censor{
   opacity:0;
   z-index:5;
   position:absolute;
   width:150px;
   height:50px;
   background:black;
   top:155px;
   left:50px;
   border:1px solid darkgray;
   -webkit-box-shadow: 0 0 10px 1px black;
           box-shadow: 0 0 10px 1px black;
  
 
}
.censor:after{
   content:"#$!@";
   z-index:6;
   position:absolute;
   width:100%;
   height:100%;
   color:white;
   font-size:2.5em;
   left:15%;
   bottom:3px;
   letter-spacing:3px;
   font-family: 'Fredoka One', cursive;
  
}
.head:hover{
   -webkit-animation:turn 500ms ease-in-out infinite;
           animation:turn 500ms ease-in-out infinite;
}
.head:hover .censor{
    -webkit-animation:speech 275ms ease-in-out infinite;
            animation:speech 275ms ease-in-out infinite;
}
@-webkit-keyframes turn{
   0%{
      -webkit-transform:perspective(200px)rotatey(0);
              transform:perspective(200px)rotatey(0);
   }
   25%{
      -webkit-transform:perspective(200px)rotatex(-5deg)rotatey(-20deg)rotatez(5deg);
              transform:perspective(200px)rotatex(-5deg)rotatey(-20deg)rotatez(5deg);
   }
   50%{
      -webkit-transform:perspective(200px)rotatex(5deg);
              transform:perspective(200px)rotatex(5deg);
   }
   75%{
      -webkit-transform:perspective(200px)rotatex(-5deg)rotatey(20deg)rotatez(-5deg);
              transform:perspective(200px)rotatex(-5deg)rotatey(20deg)rotatez(-5deg);
   }
}
@keyframes turn{
   0%{
      -webkit-transform:perspective(200px)rotatey(0);
              transform:perspective(200px)rotatey(0);
   }
   25%{
      -webkit-transform:perspective(200px)rotatex(-5deg)rotatey(-20deg)rotatez(5deg);
              transform:perspective(200px)rotatex(-5deg)rotatey(-20deg)rotatez(5deg);
   }
   50%{
      -webkit-transform:perspective(200px)rotatex(5deg);
              transform:perspective(200px)rotatex(5deg);
   }
   75%{
      -webkit-transform:perspective(200px)rotatex(-5deg)rotatey(20deg)rotatez(-5deg);
              transform:perspective(200px)rotatex(-5deg)rotatey(20deg)rotatez(-5deg);
   }
}
@-webkit-keyframes speech{
   0%{
      opacity:1;
      -webkit-transform:scale(1)perspective(200px)rotatey(0);
              transform:scale(1)perspective(200px)rotatey(0);
   }
   25%{
      -webkit-transform:scale(1.5)perspective(200px)rotatex(-15deg)rotatey(-10deg)rotatez(20deg);
              transform:scale(1.5)perspective(200px)rotatex(-15deg)rotatey(-10deg)rotatez(20deg);
   }
   50%{
      -webkit-transform:scale(.5)perspective(200px)rotatey(0)rotatez(15deg);
              transform:scale(.5)perspective(200px)rotatey(0)rotatez(15deg);
   }
   75%{
      -webkit-transform:scale(1.5)perspective(200px)rotatex(-15deg)rotatey(10deg)rotatez(-20deg);
              transform:scale(1.5)perspective(200px)rotatex(-15deg)rotatey(10deg)rotatez(-20deg);
   }
   100%{
      opacity:1;
   }
}
@keyframes speech{
   0%{
      opacity:1;
      -webkit-transform:scale(1)perspective(200px)rotatey(0);
              transform:scale(1)perspective(200px)rotatey(0);
   }
   25%{
      -webkit-transform:scale(1.5)perspective(200px)rotatex(-15deg)rotatey(-10deg)rotatez(20deg);
              transform:scale(1.5)perspective(200px)rotatex(-15deg)rotatey(-10deg)rotatez(20deg);
   }
   50%{
      -webkit-transform:scale(.5)perspective(200px)rotatey(0)rotatez(15deg);
              transform:scale(.5)perspective(200px)rotatey(0)rotatez(15deg);
   }
   75%{
      -webkit-transform:scale(1.5)perspective(200px)rotatex(-15deg)rotatey(10deg)rotatez(-20deg);
              transform:scale(1.5)perspective(200px)rotatex(-15deg)rotatey(10deg)rotatez(-20deg);
   }
   100%{
      opacity:1;
   }
}

/*@media only screen and (max-width: 800px) {
   h1{
      font-size:2em;
   }
   
}*/