animation plus smooth
This commit is contained in:
ethylotest
90
index.html
90
index.html
@@ -11,82 +11,26 @@
|
||||
</head>
|
||||
<body>
|
||||
<main class="index">
|
||||
|
||||
<div class="all_container _1">
|
||||
<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 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="actualites"><a href="./fr/actualites.html">actualités</a></h3>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
128
styles/index.css
128
styles/index.css
@@ -5,25 +5,33 @@ body main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: auto;
|
||||
height: 100vh;
|
||||
margin: auto;
|
||||
padding: 0px;
|
||||
}
|
||||
.all_container {
|
||||
width: 550px;
|
||||
margin: 0px auto 100px auto;
|
||||
height: 100vh;
|
||||
}
|
||||
.moment_center_wrapper {
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
/*------------------------------------------*/
|
||||
.logo_txt {
|
||||
height: auto;
|
||||
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*/
|
||||
._ratio {
|
||||
position: relative;
|
||||
@@ -35,11 +43,6 @@ body main {
|
||||
.circle > ._ratio {
|
||||
padding-top: 100%;
|
||||
}
|
||||
/*the wrapper box*/
|
||||
.logo_bubbles {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
/*commmon settings*/
|
||||
.logo_bubbles .circle {
|
||||
position: absolute;
|
||||
@@ -84,58 +87,50 @@ body main {
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*------------------------------------------*/
|
||||
/*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 {
|
||||
0% {transform: translate( 0%, 0%);}
|
||||
20% {transform: translate( 1%, -1%);}
|
||||
30% {transform: translate(-1%, 0%);}
|
||||
40% {transform: translate( 1%, -1%);}
|
||||
50% {transform: translate( 0%, 1%);}
|
||||
60% {transform: translate( 1%, -1%);}
|
||||
70% {transform: translate( 0%, 0%);}
|
||||
80% {transform: translate(-1%, -1%);}
|
||||
90% {transform: translate( 1%, -1%);}
|
||||
100% {transform: translate( 0%, 0%);}
|
||||
0% {transform: translate( 0%, 0%);}
|
||||
5% {transform: translate( 0.5%, -0.5%);}
|
||||
10% {transform: translate( 1%, 0%);}
|
||||
15% {transform: translate( 0.5%, -0.5%);}
|
||||
20% {transform: translate( 0%, -1%);}
|
||||
25% {transform: translate(-0.5%, -0.5%);}
|
||||
30% {transform: translate( -1%, 0%);}
|
||||
35% {transform: translate(-0.5%, -0.5%);}
|
||||
40% {transform: translate( 0%, -1%);}
|
||||
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 {
|
||||
animation-name: position;
|
||||
animation-duration: 8s;
|
||||
animation-delay: 0s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
.all_container._1 .logo_bubbles .circle {
|
||||
animation-name: shape;
|
||||
}
|
||||
.all_container._2 .logo_bubbles .circle {
|
||||
animation-name: size;
|
||||
}
|
||||
.all_container._3 .logo_bubbles .circle {
|
||||
animation-name: position;
|
||||
|
||||
animation-name: rotation;
|
||||
animation-duration: 1s;
|
||||
animation-direction: normal;
|
||||
}
|
||||
.logo_bubbles .circle._1 {
|
||||
animation-delay: -0.8s;
|
||||
@@ -154,15 +149,11 @@ body main {
|
||||
|
||||
|
||||
|
||||
|
||||
/*------------------------------------------*/
|
||||
.logo_links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 10px;
|
||||
}
|
||||
/*LINKS*/
|
||||
.logo_links > * {
|
||||
margin: auto;
|
||||
padding: 0px;
|
||||
}
|
||||
.logo_links > :first-child {
|
||||
margin-left: 0px;
|
||||
@@ -171,12 +162,15 @@ body main {
|
||||
margin-right: 0px;
|
||||
}
|
||||
.logo_links #kosmopolit a {
|
||||
color: #ee1998;
|
||||
color: var(--color-purple);
|
||||
}
|
||||
.logo_links #litterall a {
|
||||
color: #8fce3c;
|
||||
color: var(--color-green);
|
||||
}
|
||||
.logo_links #lea a {
|
||||
color: #0c9cb5;
|
||||
color: var(--color-water);
|
||||
}
|
||||
.logo_links #actualites a {
|
||||
color: hsl(59, 100%, 40%);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user