pro/2022_WEBSITE_kosmopolit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

animation plus smooth

Browse Source
This commit is contained in:
ethylotest
2021-03-22 12:21:00 +01:00
parent a325bcfd78
commit da07f4fd02
2 changed files with 78 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
index.html
View File

@@ -11,9 +11,6 @@
</head> </head>
<body> <body>
<main class="index"> <main class="index">
<div class="all_container _1">
<div class="moment_center_wrapper">
<div class="logo_txt"> <div class="logo_txt">
<img src="./docs/accueil/logo_ecritures.png" alt="logo kosmopolit"> <img src="./docs/accueil/logo_ecritures.png" alt="logo kosmopolit">
</div> </div>
@@ -32,61 +29,8 @@
<h3 id="kosmopolit"><a href="./fr/kosmopolit.html">KOSMOPOLIT</a></h3> <h3 id="kosmopolit"><a href="./fr/kosmopolit.html">KOSMOPOLIT</a></h3>
<h3 id="litterall"><a href="./fr/litterall.html">LITTER<i>all</i></a></h3> <h3 id="litterall"><a href="./fr/litterall.html">LITTER<i>all</i></a></h3>
<h3 id="lea"><a href="./fr/lettres.html">Lettres d'Europe et d'Ailleurs</a></h3> <h3 id="lea"><a href="./fr/lettres.html">Lettres d'Europe et d'Ailleurs</a></h3>
<h3 id="evenements"><a href="./fr/evenements.html">évènements</a></h3> <h3 id="actualites"><a href="./fr/actualites.html">actualités</a></h3>
</div> </div>
</div>
</div>
<div class="all_container _2">
<div class="moment_center_wrapper">
<div class="logo_txt">
<img src="./docs/accueil/logo_ecritures.png" alt="logo kosmopolit">
</div>
<div class="logo_bubbles">
<div class="_ratio">
<div class="circle _2"><div class="_ratio"></div></div>
<div class="circle _3"><div class="_ratio"></div></div>
<div class="circle _1"><div class="_ratio"></div></div>
<div class="circle _blend _2"><div class="_ratio"></div></div>
<div class="circle _blend _3"><div class="_ratio"></div></div>
<img class="logo_line"src="./docs/accueil/logo_line.png" alt="logo kosmopolit line">
<div class="circle _4"><div class="_ratio"></div></div>
</div>
</div>
<div class="logo_links">
<h3 id="kosmopolit"><a href="./fr/kosmopolit.html">KOSMOPOLIT</a></h3>
<h3 id="litterall"><a href="./fr/litterall.html">LITTER<i>all</i></a></h3>
<h3 id="lea"><a href="./fr/lettres.html">Lettres d'Europe et d'Ailleurs</a></h3>
<h3 id="evenements"><a href="./fr/evenements.html">évènements</a></h3>
</div>
</div>
</div>
<div class="all_container _3">
<div class="moment_center_wrapper">
<div class="logo_txt">
<img src="./docs/accueil/logo_ecritures.png" alt="logo kosmopolit">
</div>
<div class="logo_bubbles">
<div class="_ratio">
<div class="circle _2"><div class="_ratio"></div></div>
<div class="circle _3"><div class="_ratio"></div></div>
<div class="circle _1"><div class="_ratio"></div></div>
<div class="circle _blend _2"><div class="_ratio"></div></div>
<div class="circle _blend _3"><div class="_ratio"></div></div>
<img class="logo_line"src="./docs/accueil/logo_line.png" alt="logo kosmopolit line">
<div class="circle _4"><div class="_ratio"></div></div>
</div>
</div>
<div class="logo_links">
<h3 id="kosmopolit"><a href="./fr/kosmopolit.html">KOSMOPOLIT</a></h3>
<h3 id="litterall"><a href="./fr/litterall.html">LITTER<i>all</i></a></h3>
<h3 id="lea"><a href="./fr/lettres.html">Lettres d'Europe et d'Ailleurs</a></h3>
<h3 id="evenements"><a href="./fr/evenements.html">évènements</a></h3>
</div>
</div>
</div>
</main> </main>
</body> </body>
</html> </html>

126
styles/index.css
View File

@@ -5,25 +5,33 @@ body main {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: auto; width: auto;
height: 100vh;
margin: auto; margin: auto;
padding: 0px; padding: 0px;
} }
.all_container {
width: 550px;
margin: 0px auto 100px auto;
height: 100vh;
}
.moment_center_wrapper {
width: 100%;
margin: auto;
}
/*------------------------------------------*/
.logo_txt { .logo_txt {
height: auto; height: auto;
width: 100%; width: 100%;
margin: auto;
}
.logo_bubbles {
position: relative;
height: auto;
width: 100%;
margin: auto;
}
.logo_links {
display: flex;
flex-direction: row;
width: 100%;
margin: auto auto 50px auto;
} }
/*------------------------------------------*/ /*------------------------------------------*/
/*THE DRAWING*/
/*all the ratios of the following elements*/ /*all the ratios of the following elements*/
._ratio { ._ratio {
position: relative; position: relative;
@@ -35,11 +43,6 @@ body main {
.circle > ._ratio { .circle > ._ratio {
padding-top: 100%; padding-top: 100%;
} }
/*the wrapper box*/
.logo_bubbles {
position: relative;
width: 100%;
}
/*commmon settings*/ /*commmon settings*/
.logo_bubbles .circle { .logo_bubbles .circle {
position: absolute; position: absolute;
@@ -84,58 +87,50 @@ body main {
left: 0px; left: 0px;
width: 100%; width: 100%;
} }
/*------------------------------------------*/
/*THE ANIMATION*/ /*THE ANIMATION*/
@keyframes shape {
0% {transform: scale(1.00, 1.00);}
20% {transform: scale(1.01, 0.98);}
30% {transform: scale(0.98, 1.01);}
40% {transform: scale(1.02, 0.99);}
50% {transform: scale(1.00, 1.02);}
60% {transform: scale(0.98, 1.01);}
70% {transform: scale(1.01, 0.98);}
80% {transform: scale(0.99, 1.00);}
90% {transform: scale(0.98, 1.02);}
100% {transform: scale(1.00, 0.98);}
}
@keyframes size {
0% {transform: scale(1.00, 1.00);}
20% {transform: scale(0.98, 0.98);}
30% {transform: scale(1.01, 1.01);}
40% {transform: scale(0.99, 0.99);}
50% {transform: scale(1.02, 1.02);}
60% {transform: scale(1.01, 1.01);}
70% {transform: scale(0.98, 0.98);}
80% {transform: scale(1.00, 1.00);}
90% {transform: scale(1.02, 1.02);}
100% {transform: scale(0.98, 0.98);}
}
@keyframes position { @keyframes position {
0% {transform: translate( 0%, 0%);} 0% {transform: translate( 0%, 0%);}
20% {transform: translate( 1%, -1%);} 5% {transform: translate( 0.5%, -0.5%);}
30% {transform: translate(-1%, 0%);} 10% {transform: translate( 1%, 0%);}
40% {transform: translate( 1%, -1%);} 15% {transform: translate( 0.5%, -0.5%);}
50% {transform: translate( 0%, 1%);} 20% {transform: translate( 0%, -1%);}
60% {transform: translate( 1%, -1%);} 25% {transform: translate(-0.5%, -0.5%);}
70% {transform: translate( 0%, 0%);} 30% {transform: translate( -1%, 0%);}
80% {transform: translate(-1%, -1%);} 35% {transform: translate(-0.5%, -0.5%);}
90% {transform: translate( 1%, -1%);} 40% {transform: translate( 0%, -1%);}
100% {transform: translate( 0%, 0%);} 45% {transform: translate(-0.5%, -0.5%);}
50% {transform: translate( -1%, 0%);}
55% {transform: translate(-0.5%, 0.5%);}
60% {transform: translate( 0%, 1%);}
65% {transform: translate( 0.5%, 0.5%);}
70% {transform: translate( 1%, 1%);}
75% {transform: translate( 0.5%, 0.5%);}
80% {transform: translate( 1%, 0%);}
85% {transform: translate( 0.5%, -0.5%);}
90% {transform: translate( 0%, -1%);}
95% {transform: translate(-0.5%, -0.5%);}
100% {transform: translate( -1%, 0%);}
}
@keyframes rotation {
from {transform: rotate(0deg); transform-origin: 50% 50.5%;}
to {transform: rotate(360deg); transform-origin: 50.5% 50%;}
} }
.logo_bubbles .circle { .logo_bubbles .circle {
animation-name: position;
animation-duration: 8s; animation-duration: 8s;
animation-delay: 0s; animation-delay: 0s;
animation-timing-function: linear; animation-timing-function: linear;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-direction: alternate; animation-direction: alternate;
}
.all_container._1 .logo_bubbles .circle { animation-name: rotation;
animation-name: shape; animation-duration: 1s;
} animation-direction: normal;
.all_container._2 .logo_bubbles .circle {
animation-name: size;
}
.all_container._3 .logo_bubbles .circle {
animation-name: position;
} }
.logo_bubbles .circle._1 { .logo_bubbles .circle._1 {
animation-delay: -0.8s; animation-delay: -0.8s;
@@ -154,15 +149,11 @@ body main {
/*------------------------------------------*/ /*------------------------------------------*/
.logo_links { /*LINKS*/
display: flex;
flex-direction: row;
padding: 10px;
}
.logo_links > * { .logo_links > * {
margin: auto; margin: auto;
padding: 0px;
} }
.logo_links > :first-child { .logo_links > :first-child {
margin-left: 0px; margin-left: 0px;
@@ -171,12 +162,15 @@ body main {
margin-right: 0px; margin-right: 0px;
} }
.logo_links #kosmopolit a { .logo_links #kosmopolit a {
color: #ee1998; color: var(--color-purple);
} }
.logo_links #litterall a { .logo_links #litterall a {
color: #8fce3c; color: var(--color-green);
} }
.logo_links #lea a { .logo_links #lea a {
color: #0c9cb5; color: var(--color-water);
}
.logo_links #actualites a {
color: hsl(59, 100%, 40%);
} }