CSS Easter Egg Decorator

In this example below you will see how to do a CSS Easter Egg Decorator with some HTML / CSS and Javascript

CSS Easter Egg Decorator. Just having fun with my nieces and nephews after church and eating their Easter candy. Sort of a mashup of things found on Codepen . Happy Easter. Peace.

Thumbnail
This awesome code was written by WhizofaWiz, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright WhizofaWiz ©
  • HTML
  • CSS
  • JavaScript
    <section id="eggfactory">
    <div id="wizardsofcodepen" class="wiztext"><span class="icon-codepen spin"></span> Happy Easter!</div>
<div class="belt"></div>
<div class="egg-container">
  <div class="egg"></div>
</div>
<div class="decorated-container">
<div class="decorated-egg rainbow-egg">

</div>
</div>
<div class="rainbow-magic">
<div class="bunny">
  <div id="eye-1" class="eye"></div>
  <div id="eye-2" class="eye"></div>
  
  <div class="mouth"></div>
</div>
<ul id="rainbow">
  <li class="red">
    <strong class="ribbon">Red</strong>
  </li>
  <li class="orange">
    <strong class="ribbon">Orange</strong>
  </li>
  <li class="yellow">
    <strong class="ribbon">Yellow</strong>
  </li>
  <li class="green">
    <strong class="ribbon">Green</strong>
  </li>
  <li class="blue">
    <strong class="ribbon">Blue</strong>
  </li>
 
 
</ul>
</div>
</section>

/*Downloaded from https://www.codeseek.co/WhizofaWiz/css-easter-egg-decorator-EKXEXm */
    /* CSS Egg Decorator.  Just having fun with my nieces and nephews and eating candy. 
Sort od a mashup of things I found on Codepen

*/

@import url(https://fonts.googleapis.com/css?family=Dancing+Script:400,700);
* {
	box-sizing: border-box;
}
*:after, *:before {
	box-sizing: border-box;
}
html, body {
	height: 100%;
	width: 100%;
	overflow: hidden;
	background: #91CC88;
}
.rainbow-magic {
	width: 500px;
	height: 250px;
	position: absolute;
	bottom: 100px;
	margin-left: 30%;
	z-index: 3;
	border-radius: 500px 500px 0 0;
	-moz-border-radius: 500px 500px 0 0;
	-webkit-border-radius: 500px 500px 0 0;
	border: 0px solid #000000;
	overflow: hidden;
	background: #AD8096;
}
#eggfactory {
}
.belt {
	position: absolute;
	bottom: 90px;
	left: 0px;
	right: 0px;
	height: 10px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	background: #513f3e;
}
.belt:before {
	background-image: linear-gradient(90deg, #513f3e 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, #513f3e 50%, #513f3e 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
	background-size: 30px 30px;
	position: absolute;
	content: '';
	display: block;
	height: 10px;
	left: 10px;
	right: 11px;
	top: -2px;
}
.belt:before {
	-webkit-animation: moveLeft 9s infinite;
	animation: moveLeft 9s infinite;
}
@keyframes moveLeft {
 to {
 background-position: 100%;
}
}
@-webkit-keyframes moveLeft {
 to {
 background-position: 100%;
}
}
.egg-container {
	width: 120%;
	position: absolute;
	left: 0px;
	bottom: 100px;
	margin-left: -10%;
	-webkit-animation: inConveyor 3s infinite;
	animation: inConveyor 3s infinite;
}
.egg {
	position: relative;
	display: inline-block;
	width: 10em;
	height: 13em;
	background: #f7f7f7;
	border-radius: 50% / 55% 55% 45% 45%;
	box-shadow: 1.3em 1.3em 2.5em -1em rgba(0, 0, 0, 0.1), 0.2em 0.8em 1.3em -0.1em rgba(0, 0, 0, 0.7), -1em -2.5em 5em rgba(0, 0, 0, 0.3) inset, -0.4em -0.3em 2.5em rgba(0, 0, 0, 0.4) inset;
	-webkit-animation: jiggle 5s ease-in-out infinite;
	animation: jiggle 5s ease-in-out infinite;
}
 @keyframes inConveyor {
 to {
 transform: translate(40%, 0);
}
}
 @-webkit-keyframes inConveyor {
 to {
 -webkit-transform: translate(40%, 0);
}
}
.decorated-egg {
	display: inline-block;
	width: 10em;
	height: 13em;
	background: #f7f7f7;
	border-radius: 50% / 55% 55% 45% 45%;
	box-shadow: 1.3em 1.3em 2.5em -1em rgba(0, 0, 0, 0.1), 0.2em 0.8em 1.3em -0.1em rgba(0, 0, 0, 0.7), -1em -2.5em 5em rgba(0, 0, 0, 0.3) inset, -0.4em -0.3em 2.5em rgba(0, 0, 0, 0.4) inset;
	-webkit-animation: jiggle 5s ease-in-out infinite;
	animation: jiggle 5s ease-in-out infinite;
}
.decorated-container {
	position: absolute;
	bottom: 100px;
	left: 46%;
	-webkit-animation: outConveyor 3s infinite;
	-webkit-animation-delay: 3s;
	animation: outConveyor 3s infinite;
	animation-delay: 3s;
}
 @-webkit-keyframes outConveyor {
 to {
 left: 140%;
}
}
 @keyframes outConveyor {
 to {
 left: 140%;
}
}
.rainbow-egg {
	background-image: -webkit-radial-gradient(center -50% circle, #FA6EA1 0%, #FA6EA1 10%, #FFCBCF 11%, #FFCBCF 20%, #30cc00 21%, #30cc00 30%, #00ccb4 31%, #00ccb4 40%, #D9B2FF 41%, #D9B2FF 50%, #b400cc 51%, #b400cc 60%, #cc0003 61%, #cc0003 70%, #FFCBCF 71%, #FFCBCF 80%, #30cc00 81%, #30cc00 90%, #00ccb4 91%, #00ccb4 100%);
	background-image: radial-gradient(circle at center -50%, #FA6EA1 0%, #FA6EA1 10%, #FFCBCF 11%, #FFCBCF 20%, #30cc00 21%, #30cc00 30%, #00ccb4 31%, #00ccb4 40%, #D9B2FF 41%, #D9B2FF 50%, #b400cc 51%, #b400cc 60%, #cc0003 61%, #cc0003 70%, #FFCBCF 71%, #FFCBCF 80%, #30cc00 81%, #30cc00 90%, #00ccb4 91%, #00ccb4 100%);
	background-size: 2.5em 2.5em;
}
/* Bunny Forked https://codepen.io/alibarin/pen/vDBKH */
.bunny {
	background: #C75482;
	border-radius: 50px;
	height: 100px;
	left: 200px;
	position: absolute;
	z-index: 500;
	top: 125px;
	width: 100px;
}
.bunny:before, .bunny:after {
	background: #C75482;
	border-radius: 30px 30px 10px 10px;
	bottom: 65%;
	border-top: 0;
	border-bottom: 0;
	content: ' ';
	display: block;
	height: 100px;
	position: absolute;
	transform-origin: 50% 100%;
	width: 40px;
}
.bunny:before {
	animation: ear-1 3s infinite;
	left: 5px;
	transform: rotate(45deg);
	z-index: -2;
}
.bunny:after {
	animation: ear-2 3s infinite;
	right: 5px;
	transform: rotate(-45deg);
	z-index: -1;
}
.bunny .eye {
	background: #fff;
	border-radius: 20px;
	height: 20px;
	position: absolute;
	top: 35%;
	width: 20px;
	-webkit-animation-name: blink;
	-webkit-animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
	-webkit-transform-origin: 50%;
	animation-name: blink;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	transform-origin: 50%;
}
.bunny .eye#eye-1 {
	left: 22%;
}
.bunny .eye#eye-2 {
	right: 22%;
}
.bunny .mouth {
	border: 3px solid #fff;
	border-radius: 50px;
	bottom: 15px;
	clip: rect(25px, 44px, 36px, 0px);
	height: 30px;
	left: 50%;
	margin-left: -23px;
	position: absolute;
	width: 40px;
}
 @keyframes ear-1 {
 0% {
 transform: rotate(45deg);
}
 50% {
 transform: rotate(0deg);
}
 100% {
 transform: rotate(45deg);
}
}
@keyframes ear-2 {
 0% {
 transform: rotate(-45deg);
}
 50% {
 transform: rotate(0deg);
}
 100% {
 transform: rotate(-45deg);
}
}
/* Rainbow Rinder forked from https://codepen.io/annayo/pen/BDdzw*/
#rainbow {
	height: 250px;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
 background: #  width: 500px;
	-moz-transition: height 500ms ease-in-out;
	-webkit-transition: height 500ms ease-in-out;
	transition: height 500ms ease-in-out;
}
#rainbow.reveal {
	height: 400px;
}
#rainbow li {
	position: absolute;
	height: 100%;
	text-indent: -9999px;
	opacity: 0.8;
}
#rainbow .ribbon {
	border-radius: 50%;
	border-style: solid;
	border-width: 40px;
	position: absolute;
	left: inherit;
	top: inherit;
	-moz-animation: spin;
	-moz-animation-duration: 2s;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	-moz-animation-fill-mode: forwards;
	-webkit-animation: spin;
	-webkit-animation-duration: 2s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-fill-mode: forwards;
	animation: spin;
	animation-duration: 2s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-fill-mode: forwards;
}
#rainbow .red {
	left: 0;
	top: 0;
}
#rainbow .red .ribbon {
	border-color: #FA6EA1;
	height: 500px;
	width: 500px;
	clip: rect(0px, 580px, 290px, 0px);
	-moz-animation-delay: 0s;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
#rainbow .orange {
	left: 20px;
	top: 20px;
}
#rainbow .orange .ribbon {
	border-color: #FFCBCF;
	height: 420px;
	width: 420px;
	clip: rect(0px, 500px, 250px, 0px);
	-moz-animation-delay: 1s;
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}
#rainbow .yellow {
	left: 40px;
	top: 40px;
}
#rainbow .yellow .ribbon {
	border-color: #F9FC9D;
	height: 340px;
	width: 340px;
	clip: rect(0px, 420px, 210px, 0px);
	-moz-animation-delay: 2s;
	-webkit-animation-delay: 2s;
	animation-delay: 2s;
}
#rainbow .green {
	left: 60px;
	top: 60px;
}
#rainbow .green .ribbon {
	border-color: #BAF3C3;
	height: 260px;
	width: 260px;
	clip: rect(0px, 340px, 170px, 0px);
	-moz-animation-delay: 3s;
	-webkit-animation-delay: 3s;
	animation-delay: 3s;
}
#rainbow .blue {
	left: 80px;
	top: 80px;
}
#rainbow .blue .ribbon {
	border-color: #D9B2FF;
	height: 180px;
	width: 180px;
	clip: rect(0px, 260px, 130px, 0px);
	-moz-animation-delay: 4s;
	-webkit-animation-delay: 4s;
	animation-delay: 4s;
}
#rainbow .indigo {
	left: 100px;
	top: 100px;
}
#rainbow .indigo .ribbon {
	border-color: indigo;
	height: 100px;
	width: 100px;
	clip: rect(0px, 180px, 90px, 0px);
	-moz-animation-delay: 5s;
	-webkit-animation-delay: 5s;
	animation-delay: 5s;
}
#rainbow .violet {
	left: 120px;
	top: 120px;
}
#rainbow .violet .ribbon {
	border-color: violet;
	height: 20px;
	width: 20px;
	clip: rect(0px, 100px, 50px, 0px);
	-moz-animation-delay: 6s;
	-webkit-animation-delay: 6s;
	animation-delay: 6s;
}
 @-webkit-keyframes jiggle {
 0%, 70%, 100% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 80% {
 -webkit-transform: rotate(-10deg);
 transform: rotate(-10deg);
}
 90% {
 -webkit-transform: rotate(10deg);
 transform: rotate(10deg);
}
}
 @keyframes jiggle {
 0%, 70%, 100% {
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}
 80% {
 -webkit-transform: rotate(-10deg);
 transform: rotate(-10deg);
}
 90% {
 -webkit-transform: rotate(10deg);
 transform: rotate(10deg);
}
}
 @-moz-keyframes spin {
 from {
 -moz-transform: rotate(0deg);
}
 to {
 -moz-transform: rotate(360deg);
}
}
 @-webkit-keyframes spin {
 from {
 -webkit-transform: rotate(0deg);
}
 to {
 -webkit-transform: rotate(360deg);
}
}
 @keyframes spin {
 from {
 transform: rotate(0deg);
}
 to {
 transform: rotate(360deg);
}
}
 @-webkit-keyframes blink {
 0% {
-webkit-transform: scaleX(1) scaleY(1);
}
 1% {
-webkit-transform: scaleX(1.3) scaleY(0.1);
}
 2% {
-webkit-transform: scaleX(1) scaleY(1);
}
 60% {
-webkit-transform: scaleX(1) scaleY(1);
}
 61% {
-webkit-transform: scaleX(1.3) scaleY(0.1);
}
 62% {
-webkit-transform: scaleX(1) scaleY(1);
}
 100% {
-webkit-transform: scaleX(1) scaleY(1);
}
}
 @keyframes blink {
 0% {
transform: scaleX(1) scaleY(1);
}
 1% {
transform: scaleX(1.3) scaleY(0.1);
}
 2% {
transform: scaleX(1) scaleY(1);
}
 60% {
transform: scaleX(1) scaleY(1);
}
 61% {
transform: scaleX(1.3) scaleY(0.1);
}
 62% {
transform: scaleX(1) scaleY(1);
}
 100% {
transform: scaleX(1) scaleY(1);
}
}
@font-face {
	font-family: 'icomoon';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/icomoon.eot?rm8fqk');
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/icomoon.eot?rm8fqk#iefix') format('embedded-opentype'),  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/icomoon.ttf?rm8fqk') format('truetype'),  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/icomoon.woff?rm8fqk') format('woff'),  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/icomoon.svg?rm8fqk#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color:#228DFF !important;
}
.icon-codepen:before {
	content: "\e900";
}

.wiztext {
	color: #FF0092;
	z-index:-1;
	margin-top: 8%;
	font-size: 10vw;
	font-weight:bold;
	text-align: left;
	letter-spacing: 10px;
	position: absolute;
	width: 150%;
	min-width: 3000px;
	z-index: 2000;
	display: inline-block;
		font-family: 'Dancing Script', cursive;
	text-shadow: 0px 3px 0px #111,  0px 14px 10px rgba(0,0,0,0.15),  0px 24px 2px rgba(0,0,0,0.1),  0px 34px 30px rgba(0,0,0,0.1);
	animation: train 30s infinite linear;
	-webkit-animation: train 30s infinite linear;
}

@keyframes train {
 0% {
 left: 250%;
}
 100% {
 left: -250%;
}
}
@-webkit-keyframes train {
 0% {
 left: 250%;
}
 100% {
 left: -250%;
}
}


/*Downloaded from https://www.codeseek.co/WhizofaWiz/css-easter-egg-decorator-EKXEXm */
    /*
Happy Easter and Peace.
*/

Comments