happy new year – Thingography.com
https://thingography.com
More than a Photo Gallery
Thu, 13 Feb 2025 21:08:15 +0000
en-US
hourly
1
-
Happy New Year CSS Animation
https://thingography.com/css-happy-new-year/
Sun, 18 Feb 2018 21:12:34 +0000
http://thingography.com/my-things/?p=130
.ani-box {width: 100%; height: 100%; position: relative; }
.bas1, .bas2, .bas3, .bas4, .bas5, .bas6, .bas7, .bas8, .bas9, .bas10 {
height: 235px;
width: 100px;
margin-left: 50%;
margin-top: 300px;
position: absolute;
animation: float 18s linear infinite, right 15s infinite;
}
.bas2 {
margin-left: 35%;
transform: scale(0.9,0.9);
animation: float 10s linear infinite;
}
.bas3 {
margin-left: 75%;
animation: float 11s linear infinite, left 15s infinite;
}
.bas4 {
margin-left: 60%;
transform: scale(0.5,0.5);
animation: float 12s linear infinite;
}
.bas5 {
margin-left: 20%;
transform: scale(1.1,1.1);
animation: float 12s linear infinite, left 11s infinite;
}
.bas6 {
margin-left: 85%;
animation: float 8s linear infinite;
}
.bas7 {
margin-left: 10%;
transform: scale(0.7,0.7);
animation: float 9s linear infinite, right 15s infinite;
}
.bas8 {
margin-left: 40%;
transform: scale(0.6,0.6);
animation: float 11s linear infinite, right 12s infinite;
}
.bas9 {
margin-left: 0%;
transform: scale(0.6,0.6);
animation: float 10s linear infinite, right 12s infinite;
}
.bas10 {
margin-left: 12%;
transform: scale(0.6,0.6);
animation: float 15s linear infinite, right 18s infinite;
}
/* Balloon Animation Keyframes */
@keyframes float {
0% {top: 80%;}
100% {top:-70%;}
}
@keyframes left {
0% {transform:translateX( 0px);}
50%{transform:translateX(-200px);}
100% {transform:translateX( 0px);}
}
@keyframes right {
0% {transform:translateX( 0px);}
50%{transform:translateX(300px);}
100% {transform:translateX( 0px);}
}
/* Balloon Shapes */
.red, .blue, .yellow, .green, .orange, .purple, .lblue, .lime, .violet, .red2 {
border: 1px solid #969696;
display: block;
width: 94px;
height: 135px;
background-color: red;
border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
box-shadow: 0px 0px 5px 0px #555555;
}
/* Balloon Colors */
.blue {background-color: blue;}
.yellow {background-color: yellow;}
.green {background-color: green;}
.purple {background-color: #9900CC;}
.orange {background-color: orange;}
.lblue {background-color: #66FFFF;}
.lime {background-color: #66FF33;}
.violet {background-color: #FF00DC;}
.red2 {background-color: #FF006E;}
.string {
width: 1px;
height: 100px;
margin-left: 46px;
background-color: #0000FF;
}
.layer0, .layer1, .layer2, .layer3 {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
position: absolute;
opacity: 1;
}
.layer0 {
background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/happy-new-year/conf-0.png');
animation: conf0 10s linear infinite;
}
.layer1 {
opacity: 0.5;
background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/happy-new-year/conf-1.png');
animation: conf1 25s linear infinite, conf1z 40s linear;
}
.layer2 {
background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/happy-new-year/conf-2.png');
animation: conf2 17s linear infinite, conf2z 40s linear;
}
.layer3 {
background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/happy-new-year/conf-3.png');
animation: conf3 13s linear infinite, conf2z 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);}
}
/* Layer 2 - 2nd Addition conf Falling Animation */
@keyframes conf2 {
0% {background-position: 0px 0px; transform:scale(1.0,1.0) skewY( 0deg);}
50% { transform:scale(0.9,0.9) skewY(10deg);}
100%{background-position:-1000px 1000px; transform:scale(1.0,1.0) skewY( 0deg);}
}
/* Layer 3 - 3rd Addition conf Falling Animation */
@keyframes conf3 {
0% {background-position: 0px 0px;}
100%{background-position: 0px 400px;}
}
/* 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;}
}
/* Sbow Layer 2 Addition Fade-In Animation */
@keyframes conf2z {
0% { opacity: 0;}
25% { opacity: 0;}
50% { opacity: 1;}
100%{ opacity: 1;}
}
/* Happy New Year Text */
.text {
margin: 2em auto 0em auto;
font-size: 3em;
font-family: Arial;
text-align: center;
width: 80%;
position: relative;
letter-spacing: 0.1em;
line-height: 1.2em;
text-shadow: 0 -0.04em 0.005em #333333, -0.01em -0.01em 0.2em #000000;
z-index: 2;
animation: conf2z 30s linear infinite;
}
/* Text Colors */
.text1 {color: #FFFF00;}
.text3 {color: #FF0000;}
.text2 {color: #0000FF;}
.text4 {color: #009933;}
audio {
height: 1.6em;
line-height: 1.5em;
background-color: #99CCFF;
width: 240px;
margin: 0;
float: right;
}
]]>