happy new year – Thingography.com https://thingography.com More than a Photo Gallery Tue, 19 Feb 2019 00:03:31 +0000 en-US hourly 1 Happy New Year CSS Animation https://thingography.com/css-happy-new-year/ https://thingography.com/css-happy-new-year/#respond 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; }
Happy
New
Year
2020

]]> https://thingography.com/css-happy-new-year/feed/ 0