Skip to content

Instantly share code, notes, and snippets.

@CurleyWebDev

CurleyWebDev/index.html

Last active August 21, 2019 14:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save CurleyWebDev/b2aa5aa6e4e03324498e2fd761318cad to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save CurleyWebDev/b2aa5aa6e4e03324498e2fd761318cad to your computer and use it in GitHub Desktop.
Download ZIP
Pure CSS 😡/🤬
Raw
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>
Raw
pure-css.markdown

Pure CSS 😡/🤬

Pure CSS "angry" emoji.

By CurleyWebDev

License.

Raw
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;
}
}*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment