.ani-box { height: 500px; position: relative; overflow: hidden;}
.ani-box {
background: #207cca;
background: -moz-linear-gradient(top, #207cca 0%, #629bc9 19%, #b6eaf9 65%, #39931d 69%, #39931d 72%, #39931d 78%, #4aa821 89%, #36a001 97%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#207cca), color-stop(19%,#629bc9), color-stop(65%,#b6eaf9), color-stop(69%,#39931d), color-stop(72%,#39931d), color-stop(78%,#39931d), color-stop(89%,#4aa821), color-stop(97%,#36a001));
background: -webkit-linear-gradient(top, #207cca 0%,#629bc9 19%,#b6eaf9 65%,#39931d 69%,#39931d 72%,#39931d 78%,#4aa821 89%,#36a001 97%);
background: -o-linear-gradient(top, #207cca 0%,#629bc9 19%,#b6eaf9 65%,#39931d 69%,#39931d 72%,#39931d 78%,#4aa821 89%,#36a001 97%);
background: -ms-linear-gradient(top, #207cca 0%,#629bc9 19%,#b6eaf9 65%,#39931d 69%,#39931d 72%,#39931d 78%,#4aa821 89%,#36a001 97%);
background: linear-gradient(to bottom, #207cca 0%,#629bc9 19%,#b6eaf9 65%,#39931d 69%,#39931d 72%,#39931d 78%,#4aa821 89%,#36a001 97%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#207cca', endColorstr='#36a001',GradientType=0 );
}
.egg1, .egg2, .egg3, .egg4, .egg6, .egg5, .egg7, .egg8, .egg9, .egg10, .egg11, .egg12, .egg13, .egg14, .egg15, .egg16, .egg17, .egg18, .egg19, .egg20, .egg21, .egg22, .egg23, .egg24 {
border: 1px solid #969696;
display: block;
width: 94px;
height: 135px;
border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
box-shadow: 0px 0px 5px 0px #000000;
position: absolute;
z-index: 10;
}
/* Egg Placement and animation setup for 10 different Eggs */
.egg1 {
background-color:#FFFF00;
background-image: radial-gradient(#FF6A00 15%, transparent 16%),radial-gradient(#00FF21 15%, transparent 16%);
background-size:30px 30px;
background-position: 10px 10px, 30px 30px;
margin-left: 8%;
animation: floatsmall 18s linear infinite;
}
.egg2 {
background-color:#00FFFF;
background-image: linear-gradient(90deg, rgba(255,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(255,0,0,.5) 50%, transparent 50%);
background-size:25px 25px;
margin-left: 35%;
animation: float 10s linear infinite;
}
.egg3 {
background-color:#FFFF00;
background-image: linear-gradient(90deg, rgba(0,255,255,.5) 50%, transparent 50%), linear-gradient(rgba(0,255,255,.5) 50%, transparent 50%);
background-size:25px 25px;
margin-left: 75%;
animation: float 11s linear infinite, left 11s infinite;
}
.egg4 {
background-color:#FF0000;
background-image: radial-gradient(#00D607 15%, transparent 16%), radial-gradient(#51C2FF 15%, transparent 16%);
background-size:60px 60px;
background-position: 0 0, 30px 30px;
margin-left: 60%;
animation: float 12s linear infinite;
}
.egg5 {
background-color: #0094FF;
background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%);
background-size: 10px 10px;
margin-left: 85%;
animation: floatsmall 8s linear infinite;
}
.egg6 {
background-color: orange;
background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%);
background-size: 10px 10px;
margin-left: 20%;
animation: float 12s linear infinite, left 12s infinite;
}
.egg7 {
background-color: #FFFF00;
background-image: linear-gradient(transparent 0%, rgba(205,200,205,.9) 50% );
background-size: 20px 20px;
margin-left: 30%;
animation: floatsmall 9s linear infinite, right 9s infinite;
}
.egg8 {
background:linear-gradient(135deg, #FFFF00 25%, transparent 25%) -50px 0, linear-gradient(225deg, #00FF00 25%, transparent 25%) -50px 0, linear-gradient(315deg, #FFFF00 25%, transparent 25%), linear-gradient(45deg, #00FF00 25%, transparent 25%);
background-size: 25px 25px;
background-color: #EC173A;
margin-left: 45%;
animation: float 7s linear infinite;
}
.egg9 {
background-color: #00CCFF;
background-image: linear-gradient(45deg, #FF92BB 25%, transparent 25%, transparent 75%, #FF92BB 75%, #FF92BB), linear-gradient(-45deg, #FF92BB 25%, transparent 25%, transparent 75%, #FF92BB 75%, #FF92BB);
background-size:25px 25px;
margin-left: 1%;
animation: float 10s linear infinite, right 10s infinite;
}
.egg10 {
background: linear-gradient(135deg, #0000FF 25%, transparent 25%) 0px 0px, linear-gradient(225deg, #FF0000 25%, transparent 25%) 0px 0px, linear-gradient(315deg, #FFFF00 25%, transparent 25%), linear-gradient( 45deg, #00FFFF 25%, transparent 25%);
background-size: 30px 30px;
background-color: #00FF00;
margin-left: 96%;
animation: float 15s linear infinite, right 15s infinite;
}
.egg11 {
background: linear-gradient(135deg, #0000FF 25%, transparent 25%) -10px -5px, linear-gradient(225deg, #FF0000 25%, transparent 25%) -10px -5px, linear-gradient(315deg, #FFFF00 25%, transparent 25%), linear-gradient( 45deg, #00FFFF 25%, transparent 25%);
background-size: 30px 60px;
background-color: #00FF00;
margin-left: 52%;
animation: float 18s linear infinite;
}
.egg12 {
background: linear-gradient(135deg, #0000FF 25%, transparent 25%) -10px 0, linear-gradient(225deg, #FF0000 25%, transparent 25%) -10px 0, linear-gradient(315deg, #FFFF00 25%, transparent 25%), linear-gradient( 45deg, #00FFFF 25%, transparent 25%);
background-size: 30px 30px;
background-color: #FF00FF;
margin-left: 92%;
animation: float 13s linear infinite;
}
.egg13 {
background: linear-gradient(135deg, #FFFF00 25%, transparent 25%) -50px 0, linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0, linear-gradient(315deg, #FFFF00 25%, transparent 25%), linear-gradient(45deg, #ECEDDC 25%, transparent 25%);
background-size: 15px 15px;
background-color: #EC173A;
margin-left: 17%;
animation: float 17s linear infinite;
}
.egg14 {
background: linear-gradient(135deg, #FF0000 25%, transparent 25%) -10px 0, linear-gradient(225deg, #FF0000 25%, transparent 25%) -10px 0, linear-gradient(315deg, #FF0000 25%, transparent 25%), linear-gradient( 45deg, #FF0000 25%, transparent 25%);
background-size: 20px 20px;
background-color: #FF00FF;
margin-left: 67%;
animation: float 15s linear infinite;
}
.egg15 {
background: linear-gradient(135deg, #FF92FF 25%, transparent 25%) -5px 0, linear-gradient(225deg, #FF92FF 25%, transparent 25%) -5px 0, linear-gradient(315deg, #FF92FF 25%, transparent 25%), linear-gradient( 45deg, #FF92FF 25%, transparent 25%);
background-size: 20px 20px;
background-color: #00FFFF;
margin-left: 77%;
animation: float 10s linear infinite;
}
.egg16 {
background-color:#FF0000;
background-image: linear-gradient(90deg, rgba(0,0,255,.5) 50%, transparent 50%),linear-gradient(rgba(0,0,255,.5) 50%, transparent 50%);
background-size:25px 25px;
margin-left: 20%;
animation: float 20s linear infinite;
}
.egg17 {
background-color: #FF92FF;
background-image: linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px),linear-gradient(335deg, #b00 23px, transparent 23px),linear-gradient(155deg, #d00 23px, transparent 23px);
background-size: 50px 50px;
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
margin-left: 57%;
animation: float 8s linear infinite;
}
.egg18 {
background-color: #FF8F00;
background-image: linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #FFFF00 23px, transparent 23px),linear-gradient(155deg, #FFFF00 23px, transparent 23px);
background-size: 58px 58px;
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
margin-left: 60%;
animation: floatsmall 14s linear infinite;
}
.egg19 {
background: radial-gradient(circle, transparent 20%, #AFA7FF 20%, #AFA7FF 80%, transparent 80%, transparent),radial-gradient(circle, transparent 20%, #AFA7FF 20%, #AFA7FF 80%, transparent 80%, transparent) 50px 50px,linear-gradient(#A8B1BB 8px, transparent 8px) 0 -4px,linear-gradient(90deg, #A8B1BB 8px, transparent 8px) -4px 0;
background-color: #8EFFAE;
background-size:20px 20px, 20px 20px, 50px 50px, 50px 50px;
margin-left: 44%;
animation: float 17s linear infinite;
}
.egg20 {
background: radial-gradient(circle, transparent 20%, #0026FF 20%, #0026FF 80%, transparent 80%, transparent),radial-gradient(circle, transparent 20%, #AFA7FF 20%, #AFA7FF 80%, transparent 80%, transparent) 50px 50px, linear-gradient(#A8B1BB 8px, transparent 8px) 0 4px, linear-gradient(90deg, #A8B1BB 8px, transparent 8px) 4px 0;
background-color: #FFF7A5;
background-size:30px 30px, 30px 30px, 50px 50px, 50px 50px;
margin-left: 41%;
animation:float 11s linear infinite;
}
.egg21 {
background: linear-gradient(135deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px), linear-gradient(225deg, #708090 22px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
background-color:#708090;
background-size: 32px 32px;
margin-left: 32%;
animation: floatsmall 20s linear infinite;
}
.egg22 {
background: linear-gradient(135deg, #E7FF7F 22px, #FFFF00 22px, #FF0000 24px, transparent 24px, transparent 47px, #FFFF00 67px, #d9ecff 69px, transparent 69px), linear-gradient(225deg, #E7FF7F 22px, #FF9F32 22px, #FF0000 24px, transparent 24px, transparent 47px, #FFFF00 67px, #d9ecff 69px, transparent 69px)0 64px;
background-color:#708090;
background-size: 32px 64px;
margin-left: 70%;
animation: float 20s linear infinite, left 20s infinite;
}
.egg23 {
background-color:white;
background-image: radial-gradient(red 9px, transparent 10px), repeating-radial-gradient(red 0, red 4px, transparent 5px, transparent 20px, red 21px, red 25px, transparent 26px, transparent 50px);
background-size: 30px 30px, 30px 30px;
background-position: 0 0;
margin-left: 10%;
animation: float 19s linear infinite;
}
.egg24 {
background-color: #00FFFF;
background-image: repeating-linear-gradient(120deg, rgba(255,0,0,.1), rgba(255,0,0,.1) 1px, transparent 1px, transparent 60px),repeating-linear-gradient(60deg, rgba(255,0,0,.1), rgba(255,0,0,.1) 1px, transparent 1px, transparent 60px), linear-gradient(60deg, rgba(255,0,0,.1) 25%, transparent 85%, transparent 75%, rgba(255,0,0,.1) 75%, rgba(255,0,0,.1)), linear-gradient(60deg, rgba(255,0,0,.1) 25%, transparent 85%, transparent 75%, rgba(255,0,0,.1) 75%, rgba(255,0,0,.1));
background-size: 10px 30px;
margin-left: 20%;
animation: float 16s linear infinite;
}
/* Balloon Animation Keyframes */
@keyframes float {
0% {top:-40%; transform:rotateZ( 0deg);}
100%{top:110%; transform:rotateZ(720deg);}
}
@keyframes floatsmall {
0% {top:-40%; transform:rotateZ( 0deg);}
100%{top:110%; transform:rotateZ(720deg);}
}
@keyframes left {
0% {transform:translateX( 0px) rotateZ( 0deg);}
100%{transform:translateX(-400px) rotateZ(720deg);}
}
@keyframes right {
0% {transform:translateX( 0px) rotateZ( 0deg);}
100%{transform:translateX(300px) rotateZ(-720deg);}
}
.layer0, .layer1{
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: absolute;
opacity: 1;
z-index: 10;
}
.layer0 {
background-image: url('images/conf-0.png');
animation: conf0 10s linear infinite;
}
.layer1 {
opacity: 0.5;
background-image: url('images/conf-1.png');
animation: conf1 25s linear infinite, conf1z 40s linear;
}
/* Layer 0 - Base Layer conf Falling Animation */
@keyframes conf0 {
0% {background-position: 0px 0px;}
100%{background-position: 300px 300px;}
}
/* Layer 1 - 1st Addition conf Falling Animation */
@keyframes conf1 {
0% {background-position: 0px 0px; transform:scale(1.0,1.0);}
50% { transform:scale(0.9,0.9);}
100%{background-position: 500px 500px; transform:scale(1.0,1.0);}
}
/* Sbow Layer 1 Addition Fade-In Animation - these layers are not visible until desired time */
@keyframes conf1z {
0% { opacity: 0.0;}
50% { opacity: 0.7;}
100%{ opacity: 0.5;}
}
/* Text Fade-In Animation */
@keyframes conf2z {
0% { opacity: 0;}
25% { opacity: 0;}
33% { opacity: 1;}
66% { opacity: 1;}
100%{ opacity: 0;}
}
/* Happy New Year Text */
.text {
margin: 1em auto 0em auto;
font-size: 5em;
font-family: Arial;
text-align: center;
position: relative;
text-shadow: 0 0.04em 0.005em #333333, -0.01em -0.01em 0.2em #000000, 0 0.04em 0.5em #000000;
line-height: 1.5em;
z-index: 999;
animation: conf2z 30s linear infinite;
}
/* Text Colors */
.text1 {color: #FFFF00;}
.text2 {color: #FFCC00; font-weight: bold;}
#h {color: #33CC33;}
#a {color: #FF9900;}
#p {color: #990099;}
#p2{color: #FF6666;}
#y {color: #FFFF00;}
Surprisingly, all the eggs with patterns are all pure CSS. Easter Egg fun without JavaScript.
]]>
