183 lines
3.6 KiB
CSS
183 lines
3.6 KiB
CSS
|
|
/*------------------------------------------*/
|
|
/*ACCUEIL*/
|
|
body main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: auto;
|
|
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%;
|
|
}
|
|
|
|
/*------------------------------------------*/
|
|
/*all the ratios of the following elements*/
|
|
._ratio {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
.logo_bubbles > ._ratio {
|
|
padding-top: 70%;
|
|
}
|
|
.circle > ._ratio {
|
|
padding-top: 100%;
|
|
}
|
|
/*the wrapper box*/
|
|
.logo_bubbles {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
/*commmon settings*/
|
|
.logo_bubbles .circle {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
}
|
|
/*sie position and color for each circles*/
|
|
.logo_bubbles .circle._1 {
|
|
top: 13.4%;
|
|
left: 2.2%;
|
|
width: 51.6%;
|
|
background-color: #ee1998;
|
|
}
|
|
.logo_bubbles .circle._2 {
|
|
top: 18.8%;
|
|
left: 27.6%;
|
|
width: 51.6%;
|
|
background-color: #8fce3c;
|
|
}
|
|
.logo_bubbles .circle._3 {
|
|
top: 5.9%;
|
|
left: 66.1%;
|
|
width: 30.5%;
|
|
background-color: #0c9cb5;
|
|
}
|
|
.logo_bubbles .circle._4 {
|
|
top: 36%;
|
|
left: 59%;
|
|
width: 10.9%;
|
|
background-color: #e3e00a;
|
|
}
|
|
/*mix-blend-mode*/
|
|
.logo_bubbles .circle._blend._2 {
|
|
mix-blend-mode: luminosity;
|
|
}
|
|
.logo_bubbles .circle._blend._3 {
|
|
mix-blend-mode: color;
|
|
}
|
|
/*the line*/
|
|
.logo_bubbles .logo_line {
|
|
position: absolute;
|
|
top: 0px;
|
|
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%);}
|
|
}
|
|
.logo_bubbles .circle {
|
|
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;
|
|
}
|
|
.logo_bubbles .circle._1 {
|
|
animation-delay: -0.8s;
|
|
}
|
|
.logo_bubbles .circle._2 {
|
|
animation-delay: -1.3s;
|
|
}
|
|
.logo_bubbles .circle._3 {
|
|
animation-delay: -2.7s;
|
|
}
|
|
.logo_bubbles .circle._4 {
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*------------------------------------------*/
|
|
.logo_links {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding: 10px;
|
|
}
|
|
.logo_links > * {
|
|
margin: auto;
|
|
}
|
|
.logo_links > :first-child {
|
|
margin-left: 0px;
|
|
}
|
|
.logo_links > :last-child {
|
|
margin-right: 0px;
|
|
}
|
|
.logo_links #kosmopolit a {
|
|
color: #ee1998;
|
|
}
|
|
.logo_links #litterall a {
|
|
color: #8fce3c;
|
|
}
|
|
.logo_links #lea a {
|
|
color: #0c9cb5;
|
|
}
|
|
|