Hallowiener by Bobby McKenna

Developer
Katy DeCorah
Size
5,567 Kb
Views
42,504
  1. Hallowiener by Bobby McKenna Previews
  2. Hallowiener by Bobby McKenna HTML Codes
  3. Hallowiener by Bobby McKenna CSS Codes
  4. Hallowiener by Bobby McKenna JS Codes

How do I make an hallowiener by bobby mckenna?

Hover for zombification! Dribbble shot: http://dribbble.com/shots/1286749. What is a hallowiener by bobby mckenna? How do you make a hallowiener by bobby mckenna? This script and codes were developed by Katy DeCorah on 28 July 2022, Thursday.

Hallowiener by Bobby McKenna Previews
IQ Test

Hallowiener by Bobby McKenna - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hallowiener by Bobby McKenna</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/d5e461e75af00ed586a3a92ee.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { -moz-transition: all 0.25s linear; -o-transition: all 0.25s linear; -webkit-transition: all 0.25s linear; transition: all 0.25s linear;
}
body { background: #252524;
}
.head { background: #ffb47a; width: 10em; height: 10em; border-radius: 100%; position: relative; border-left: 1.5em solid #ffa661;
}
.head .forehead { background: #ffa661; width: 2.5em; height: .3em; border-radius: 1em; position: absolute; left: 2.25em; top: 20%;
}
.head .forehead:after { content: ""; position: absolute; background: inherit; height: inherit; width: 3.25em; top: .8em; left: -.3em; border-radius: inherit;
}
.head .ear { width: 2em; height: 2em; border-radius: 100%; position: absolute; background: #ffa661; top: 45%; z-index: -1;
}
.head .ear:first-child { left: -2.5em;
}
.head .ear:last-child { right: -1em;
}
.head .eye { background: white; width: 1em; height: .75em; border-radius: 100%; position: absolute; top: 43%;
}
.head .eye:before { content: ""; position: absolute; width: .65em; height: .65em; background: #252524; border-radius: 100%; top: .2em; left: .2em;
}
.head .eye:first-child { left: 1.25em;
}
.head .eye:last-child { right: 2.75em;
}
.head .hair { position: absolute; background: #8f3944; width: 3em; height: 3em; top: -2em; right: 3.5em; border-radius: 0.2em 0.2em 0 0;
}
.head .nose { background: #252524; width: .3em; height: .3em; border-radius: 100%; position: absolute; top: 63%; left: 3em; box-shadow: 0.75em 0 0 #252524;
}
.head .nose:before { content: ""; position: absolute; background: #ffa661; width: .9em; height: 1em; top: -.5em; left: .1em; border-radius: 100%;
}
.head .mouth { background: #252524; width: 2.5em; height: .5em; border-radius: 0.5em; position: absolute; top: 75%; left: 2.25em;
}
.head .teeth { background: white; width: .25em; height: .25em; position: absolute; left: .25em; box-shadow: .4em 0 0 white,.8em 0 0 white,1.2em 0 0 white,1.6em 0 0 white;
}
.head .blood { z-index: -1; background: #8f3944; width: 1em; height: .3em; position: absolute; left: .75em; border-radius: 0 0 0 .2em;
}
.head .blood:after { content: ""; position: absolute; background: inherit; width: .5em; height: .75em; bottom: -0.44em; left: 100%; border-radius: 0 0 0.2em 0.2em;
}
.head:hover { background: #ced574; border-left-color: #b7b85a;
}
.head:hover .hair { background: #ff96a6; border-top: 0.5em solid #252524; width: 4em; height: 2em; border-radius: 100%; position: absolute; right: 1em; top: 0.2em; -moz-transform: rotate(25deg); -ms-transform: rotate(25deg); -webkit-transform: rotate(25deg); transform: rotate(25deg);
}
.head:hover .forehead { top: 29%; background: #b7b85a;
}
.head:hover .forehead:after { background: inherit;
}
.head:hover .ear { background: #b7b85a;
}
.head:hover .eye { width: 1.5em; height: 1.5em; border: 0.25em solid #ffa661; top: 47%; background: white; border: 0.25em solid #b7b85a;
}
.head:hover .eye:before { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0;
}
.head:hover .eye:first-child { left: 0.5em;
}
.head:hover .eye:last-child { right: 2em;
}
.head:hover .nose { width: .6em; height: .6em; top: 62%; left: 2.75em; box-shadow: 1em 0 0 #252524;
}
.head:hover .nose:before { opacity: 0;
}
.head:hover .mouth { background: #252524; width: 2.5em; height: 1em; border-radius: 0.5em; position: absolute; top: 75%; left: 2.25em;
}
.head:hover .teeth { background: white; width: .25em; height: .25em; position: absolute; left: .75em; box-shadow: .75em 0 0 white, .25em .75em 0 white;
}
.head:hover .blood { z-index: 0; top: 100%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='head'> <div class='hair'></div> <div class='ears'> <div class='ear'></div> <div class='ear'></div> </div> <div class='forehead'></div> <div class='eyes'> <div class='eye'></div> <div class='eye'></div> </div> <div class='nose'></div> <div class='mouth'> <div class='teeth'></div> <div class='blood'></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hallowiener by Bobby McKenna - Script Codes CSS Codes

* { -moz-transition: all 0.25s linear; -o-transition: all 0.25s linear; -webkit-transition: all 0.25s linear; transition: all 0.25s linear;
}
body { background: #252524;
}
.head { background: #ffb47a; width: 10em; height: 10em; border-radius: 100%; position: relative; border-left: 1.5em solid #ffa661;
}
.head .forehead { background: #ffa661; width: 2.5em; height: .3em; border-radius: 1em; position: absolute; left: 2.25em; top: 20%;
}
.head .forehead:after { content: ""; position: absolute; background: inherit; height: inherit; width: 3.25em; top: .8em; left: -.3em; border-radius: inherit;
}
.head .ear { width: 2em; height: 2em; border-radius: 100%; position: absolute; background: #ffa661; top: 45%; z-index: -1;
}
.head .ear:first-child { left: -2.5em;
}
.head .ear:last-child { right: -1em;
}
.head .eye { background: white; width: 1em; height: .75em; border-radius: 100%; position: absolute; top: 43%;
}
.head .eye:before { content: ""; position: absolute; width: .65em; height: .65em; background: #252524; border-radius: 100%; top: .2em; left: .2em;
}
.head .eye:first-child { left: 1.25em;
}
.head .eye:last-child { right: 2.75em;
}
.head .hair { position: absolute; background: #8f3944; width: 3em; height: 3em; top: -2em; right: 3.5em; border-radius: 0.2em 0.2em 0 0;
}
.head .nose { background: #252524; width: .3em; height: .3em; border-radius: 100%; position: absolute; top: 63%; left: 3em; box-shadow: 0.75em 0 0 #252524;
}
.head .nose:before { content: ""; position: absolute; background: #ffa661; width: .9em; height: 1em; top: -.5em; left: .1em; border-radius: 100%;
}
.head .mouth { background: #252524; width: 2.5em; height: .5em; border-radius: 0.5em; position: absolute; top: 75%; left: 2.25em;
}
.head .teeth { background: white; width: .25em; height: .25em; position: absolute; left: .25em; box-shadow: .4em 0 0 white,.8em 0 0 white,1.2em 0 0 white,1.6em 0 0 white;
}
.head .blood { z-index: -1; background: #8f3944; width: 1em; height: .3em; position: absolute; left: .75em; border-radius: 0 0 0 .2em;
}
.head .blood:after { content: ""; position: absolute; background: inherit; width: .5em; height: .75em; bottom: -0.44em; left: 100%; border-radius: 0 0 0.2em 0.2em;
}
.head:hover { background: #ced574; border-left-color: #b7b85a;
}
.head:hover .hair { background: #ff96a6; border-top: 0.5em solid #252524; width: 4em; height: 2em; border-radius: 100%; position: absolute; right: 1em; top: 0.2em; -moz-transform: rotate(25deg); -ms-transform: rotate(25deg); -webkit-transform: rotate(25deg); transform: rotate(25deg);
}
.head:hover .forehead { top: 29%; background: #b7b85a;
}
.head:hover .forehead:after { background: inherit;
}
.head:hover .ear { background: #b7b85a;
}
.head:hover .eye { width: 1.5em; height: 1.5em; border: 0.25em solid #ffa661; top: 47%; background: white; border: 0.25em solid #b7b85a;
}
.head:hover .eye:before { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0;
}
.head:hover .eye:first-child { left: 0.5em;
}
.head:hover .eye:last-child { right: 2em;
}
.head:hover .nose { width: .6em; height: .6em; top: 62%; left: 2.75em; box-shadow: 1em 0 0 #252524;
}
.head:hover .nose:before { opacity: 0;
}
.head:hover .mouth { background: #252524; width: 2.5em; height: 1em; border-radius: 0.5em; position: absolute; top: 75%; left: 2.25em;
}
.head:hover .teeth { background: white; width: .25em; height: .25em; position: absolute; left: .75em; box-shadow: .75em 0 0 white, .25em .75em 0 white;
}
.head:hover .blood { z-index: 0; top: 100%;
}

Hallowiener by Bobby McKenna - Script Codes JS Codes

// Dribbble Inspo: Hallowiener by Bobby McKenna http://dribbble.com/shots/1286749
Hallowiener by Bobby McKenna - Script Codes
Hallowiener by Bobby McKenna - Script Codes
Home Page Home
Developer Katy DeCorah
Username katydecorah
Uploaded July 28, 2022
Rating 4.5
Size 5,567 Kb
Views 42,504
Do you need developer help for Hallowiener by Bobby McKenna?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Katy DeCorah (katydecorah) Script Codes
Name
Instagram
BLOOD
Double Vision
CSS Haiku - Constellations
Combination Lock
Google Font Explorer
THREES App Store Button
Haml Calendar
Accordion Nav
Food by nos
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!