Autumn is coming!
Revision:
<div>
<section>
<h3>Autumn is coming!</h3>
<div class="leaf">
<div><img src="../images/Fall-Autumn-Leaves-Transparent-PNG.png" height="75px" width="75px"></img></div>
<div><img src="../images/Autumn-Fall-Leaves-Pictures-Collage-PNG.png" height="75px" width="75px"></img></div>
<div><img src="../images/Autumn-Fall-Leaves-Clip-Art-PNG.png" height="75px" width="75px" ></img></div>
<div><img src="../images/Green-Leaves-PNG-File.png" height="75px" width="75px"></img></div>
<div><img src="../images/Transparent-Autumn-Leaves-Falling-PNG.png" height="75px" width="75px"></img></div>
<div><img src="../images/Realistic-Autumn-Fall-Leaves-PNG.png" height="75px" width="75px"></div>
<div><img src="../images/Autumn-Leaves-PNG-HD.png" height="75px" width="75px"></div>
</div>
<div class="leaf leaf1">
<div><img src="../images/Fall-Autumn-Leaves-Transparent-PNG.png" height="75px" width="75px"></img></div>
<div><img src="../images/Autumn-Fall-Leaves-Pictures-Collage-PNG.png" height="75px" width="75px"></img></div>
<div><img src="../images/Autumn-Fall-Leaves-Clip-Art-PNG.png" height="75px" width="75px" ></img></div>
<div><img src="../images/Green-Leaves-PNG-File.png" height="75px" width="75px"></img></div>
<div><img src="../images/Transparent-Autumn-Leaves-Falling-PNG.png" height="75px" width="75px"></img></div>
<div><img src="../images/Realistic-Autumn-Fall-Leaves-PNG.png" height="75px" width="75px"></div>
<div><img src="../images/Autumn-Leaves-PNG-HD.png" height="75px" width="75px"></div>
</div>
<div class="leaf leaf2">
<div><img src="../images/Fall-Autumn-Leaves-Transparent-PNG.png" height="75px" width="75px"></img></div>
<div><img src="../images/Autumn-Fall-Leaves-Pictures-Collage-PNG.png" height="75px" width="75px"></img></div>
<div><img src="../images/Autumn-Fall-Leaves-Clip-Art-PNG.png" height="75px" width="75px" ></img></div>
<div><img src="../images/Green-Leaves-PNG-File.png" height="75px" width="75px"></img></div>
<div><img src="../images/Transparent-Autumn-Leaves-Falling-PNG.png" height="75px" width="75px"></img></div>
<div><img src="../images/Realistic-Autumn-Fall-Leaves-PNG.png" height="75px" width="75px"></div>
<div><img src="../images/Autumn-Leaves-PNG-HD.png" height="75px" width="75px"></div>
</div>
</section>
</div>
<style>
section{height:100%; width:100%; position:absolute; }
.leaf{position:absolute; width:100%; height:100%; top:0; left:0;}
.leaf div{position:absolute; display:block;}
.leaf div:nth-child(1){left:20%; animation:fall 15s linear infinite; animation-delay:-2s;}
.leaf div:nth-child(2){left:70%; animation:fall 15s linear infinite; animation-delay:-4s;}
.leaf div:nth-child(3){left:10%; animation:fall 20s linear infinite; animation-delay:-7s;}
.leaf div:nth-child(4){left:50%; animation:fall 18s linear infinite; animation-delay:-5s;}
.leaf div:nth-child(5){left:85%; animation:fall 14s linear infinite; animation-delay:-5s;}
.leaf div:nth-child(6){left:15%; animation:fall 16s linear infinite; animation-delay:-10s;}
.leaf div:nth-child(7){left:90%; animation:fall 15s linear infinite; animation-delay:-4s;}
@keyframes fall{
0%{opacity:1;top:-10%;transform:translateX(20px) rotate(0deg);}
20%{opacity:0.8;transform:translateX(-20px) rotate(45deg);}
40%{transform:translateX(-20px) rotate(90deg);}
60%{transform:translateX(-20px) rotate(135deg);}
80%{transform:translateX(-20px) rotate(180deg);}
100%{top:110%;transform:translateX(-20px) rotate(225deg);}
}
.leaf1{transform: rotateX(180deg);}
.leaf2{transform: rotateY(180deg);}
h3{position:absolute; top:40%; width:100%; font-family: 'Courgette', cursive; font-size:4em;
text-align:center; transform:translate;color:black; transform:translateY (-50%); }
</style>
<div>
<div class="main_A"></div>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<style>
.main_A {height: 50vh; width: 100vw; position: relative;}
.d1 {position: absolute; margin-top: 90vw; background-image: url("../images/2.jpg"); background-size: 40vw 25vw; height: 30vh; width: 15vw;background-position: 0 50%;
box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8); top: 50%; transform: translateY(-50%); z-index: 2; animation: dd1 10s 4, dd12 10s 4; animation-delay: 4s, 4s;}
.d2 {position: absolute; margin-top: 95vw; background-image: url("../images/3.jpg"); background-size: 26vw 44vw; height: 25vh; width: 20vw;
background-position: -10vw 50%; left: 10vw; top: 50%; transform: translateY(-50%); z-index: 1; animation: dd2 10s 5; animation-delay: 4s;}
.d3 {position: absolute;margin-top: 90vw; background-image: url("../images/4.jpg"); background-size: 50vw 52vw; overflow: hidden; height: 34vh; width: 35vw; left: 25vw;
box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.8); background-position: -35vw 50%; top: 50%; transform: translateY(-50%); z-index: 3; animation: dd3 5s 7; animation-delay: 4s;}
.d4 {position: absolute; margin-top: 95vw; overflow: hidden; background-image: url("../images/5.jpg"); background-size: 20vw 35vw; height: 30vh; width: 50vw; left: 40vw;
background-position: -70vw 50%; top: 50%; transform: translateY(-50%); z-index: 1; animation: dd4 5s 8;animation-delay: 4s;}
@keyframes dd1 {
0% { }
50% {width: 100vw;}
}
@keyframes dd12 {
0% { }
50% {background-position: Calc(0vw - 40px) 50%;}
}
@keyframes dd2 {
0% { }
50% {background-position: Calc(-10vw - 70px) 70%;}
}
@keyframes dd3 {
0% {}
50% {background-position: Calc(-35vw + 100px) 70%;}
}
@keyframes dd4 {
0% { }
50% {background-position: Calc(-70vw - 150px) 70%;}
}
</style>
</div>
<div>
<div class="frame">
<section class="main_B">
<div class="bg"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="content_B"><h1>diagonal sliding of bars</h1></div>
</section>
</div>
<style>
.frame{height: 50vh; width: 90vw; margin-left: 5vw;}
.main_B{height: 20vw; width: 40vw; margin-left: 10vw;}
.bg{animation:slide 13s ease-in-out infinite alternate; background-image: linear-gradient(-60deg, seagreen 50%, skyblue 50%); bottom:0; left:-5%; opacity:.5; position: absolute; right:-5%; top:5vw; z-index:-1; }
.bg2 {animation-direction:alternate-reverse; animation-duration:14s;}
.bg3 {animation-duration:15s;}
.content_B {background-color:seagreen;border-radius: 25vw; box-shadow:0 0 1vw rgba(0,0,0,.25); box-sizing:border-box;left:50%; padding:1vmin; position:absolute; text-align:center;top: 30%; transform:translate(-50%, -50%);}
@keyframes slide {
0% {transform:translateX(-25%);}
100% {transform:translateX(25%);}
}
</style>
</div>
header
<header class="one"><img src="../images/5.jpg" alt="photo 1" width="25%";/></header>
<style>
header{background-image: url('../images/5.jpg'); width: 30vw; height:25vw; margin: 0vw 0vw 1vw 5vw; background-repeat:no-repeat; background-size: cover;}
header{animation: animate_A 5s infinite alternate;}
.one img{display: flex; justify-items:first baseline; border: 0.5vw solid burlywood;}
.one img{animation: slide_A 5s infinite alternate ease-in-out 0s;}
@keyframes animate_A{
from{background-position: 0 0;}
to{background-position: 150% 150%;}
}
@keyframes slide_A{
0% {transform:translateX(0%);}
100% {transform:translateX(175%);}
}
</style>
main
<main class="two"><img src="../images/1.jpg" alt="photo 2" width="20%"/> </main>
<style>
main{background-image: url('../images/1.jpg'); height:20vw;background-repeat:repeat; margin-left: 5vw;}
main{animation: animate_B 5s infinite alternate;}
.two img{display: flex; justify-items:first baseline; border: 5px solid burlywood;}
.two img{animation: slide_B 5s infinite alternate ease-in-out 0s;}
@keyframes animate_B{
from{background-position: 0 0;}
to{background-position: 100% 50%;}
}
@keyframes slide_B{
0% {transform:translateX(0%);}
100% {transform:translateX(175%);}
}
</style>
section
<div class="window">
<section class="three"><img src="../images/4.jpg" alt="photo 3" width="20%" /></section>
</div>
<style>
.window{height: 20vw;}
.three{background-image: url('../images/4.jpg'); height:20vw; width: 30vw; background-repeat:repeat; margin-left: 5vw;}
.three{animation: animate_C 15s infinite alternate;}
.three img{display: flex; justify-items:first baseline; border: 5px solid burlywood;}
.three img{animation: slide_C 5s infinite alternate ease-in-out 0s;}
@keyframes animate_C{
from{background-position: 0 0;}
to{background-position: 100% 50%;}
}
@keyframes slide_C{
0% {transform:translateX(0%);}
100% {transform:translateX(175%);}
}
</style>
aside
<aside class="four"><img src="../images/3.jpg" alt="photo 4" width="15%"/></aside>
<style>
aside{background-image: url('../images/3.jpg'); height:20vw; background-repeat:repeat;}
aside{animation: animate_D 9s infinite alternate;}
.four img{display: flex; justify-items:first baseline; border: 5px solid burlywood;}
.four img{animation: slide_D 5s infinite alternate ease-in-out 0s;}
@keyframes animate_D{
from{background-position: 0 0;}
to{background-position: 100% 50%;}
}
@keyframes slide_D{
0% {transform: translateX(0%) translateY(0%);}
100% {transform: translateX(280%) translateY(20%);}
}
</style>
footer
<footer class="five"><img src="../images/2.jpg" alt="photo 5" width="25%"/></footer>
<style>
footer{background-image: url('../images/2.jpg'); height:20vw; background-repeat:repeat;}
footer{animation: animate_E 2s infinite alternate;}
.five img{display: flex; justify-items:first baseline; border: 5px solid burlywood;}
.five img{animation: slide_E 5s infinite alternate ease-in-out 0s;}
@keyframes animate_E{
from{background-position: 0 0;}
to{background-position: 100% 50%;}
}
@keyframes slide_E{
0% {transform: translateX(0%) translateY(0%);}
100% {transform: translateX(280%) translateY(40%);}
}
</style>
<h4>animated background colors</h4>
<style>
@keyframes colorMe {
0% { background: #33CCCC; }
20% { background: #33CC36; }
40% { background: #B8CC33; }
60% { background: #FCCA00; }
80% { background: #33CC36; }
100% { background: #33CCCC; }
}
.color_1 {background: #33CCCC; animation: colorMe 9s infinite linear; text-align: center; padding: 2vw;}
h4 {text-align: center; font-family: 'Kavoon', sans-serif; font-size: 2.5vw; color: white;}
</style>
<div class=color-2>
<div class="bg_A"></div>
</div>
<style>
.bg_A{ width: 100%;height: 50vh; display: flex; align-items: center; justify-content: center;
background-size: 300% 300%;background-image: linear-gradient(-45deg, yellow 0%, yellow 25%,
yellow 51%, #ff357f 100%); -webkit-animation: AnimateBG 20s ease infinite;animation:
AnimateBG 20s ease infinite;}
@-webkit-keyframes AnimateBG {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%;}
}
@keyframes AnimateBG {
0% {background-position: 0% 50%;}
50% {background-position: 100% 50%;}
100% {background-position: 0% 50%; }
}
</style>
<div class="color_4">
<div class="center">
<h4>Background Animation</h4>
</div>
</div>
<style>
/* @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:200'); */
.color_4{width: 45vw; height: 80vh; background-image: url('../images/1.jpg'); background-size: cover; -webkit-animation: slidein 100s; animation: slidein 100s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; animation-direction: alternate;}
@-webkit-keyframes slidein {
from {background-position: top; background-size:3000px; }
to {background-position: -100px 0px;background-size:2750px;}
}
@keyframes slidein {
from {background-position: top;background-size:3000px; }
to {background-position: -100px 0px;background-size:2750px;}
}
.color_4.center{display: flex; align-items: center; justify-content: center; position: absolute; margin: auto; top: 0; right: 0; bottom: 0;
left: 0; background: rgba(75, 75, 250, 0.3); border-radius: 3px;}
.center h4{ text-align:center; color:white; font-family: 'Source Code Pro', monospace; text-transform:uppercase; }
</style>
<div class="color_5">
<div class="slider-thumb"></div>
</div>
<style>
.color_5 { height: 80vh; background: linear-gradient(90deg,#e52e71,#ff8a00);}
.slider-thumb::before {position: relative; content: ""; left: 20%; top: 5vw; width: 30vw;
height: 30vw; background: #17141d; border-radius: 62% 47% 82% 35% / 45% 45% 80% 66%;
will-change: border-radius, transform, opacity; animation: sliderShape 5s linear infinite;
display: block; z-index: 1; -webkit-animation: sliderShape 5s linear infinite; }
@keyframes sliderShape{
0%,100%{ border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%; transform:
translate3d(0,0,0) rotateZ(0.01deg);}
34%{ border-radius: 70% 30% 46% 54% / 30% 29% 71% 70%; transform:
translate3d(0,5px,0) rotateZ(0.01deg); }
50%{ transform: translate3d(0,0,0) rotateZ(0.01deg);}
67%{border-radius: 100% 60% 60% 100% / 100% 100% 60% 60% ; transform:
translate3d(0,-3px,0) rotateZ(0.01deg);}
}
</style>
<div class="color_6">
<section>
<div class='air air1'></div>
<div class='air air2'></div>
<div class='air air3'></div>
<div class='air air4'></div>
</section>
</div>
<style>
.color_6 section{ position: relative; width: 100%; height: 60vh; background: #3586ff;
overflow: hidden; }
.color_6 section .air{position: absolute; bottom: 0; left: 0; width: 100%;
height: 100px; background: url(../images/wave.png); background-size: 1000px 100px;}
.color_6 section .air.air1{animation: wave 30s linear infinite; z-index: 1000;
opacity: 1; animation-delay: 0s; bottom: 0; }
.color_6 section .air.air2{ animation: wave2 15s linear infinite; z-index: 999;
opacity: 0.5; animation-delay: -5s; bottom: 10px;}
.color_6 section .air.air3{animation: wave 30s linear infinite; z-index: 998;
opacity: 0.2; animation-delay: -2s; bottom: 15px; }
.color_6 section .air.air4{ animation: wave2 5s linear infinite; z-index: 997;
opacity: 0.7; animation-delay: -5s; bottom: 20px; }
@keyframes wave{
0%{background-position-x: 0px;}
100%{background-position-x: 1000px; }
}
@keyframes wave2{
0%{background-position-x: 0px;}
100%{background-position-x: -1000px;}
}
</style>