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

animation en 8

Browse Source
This commit is contained in:
hugogogo
2021-04-02 20:27:21 +02:00
parent 9331eaf173
commit 77fd4ffb6a
3 changed files with 200 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
index2.html Normal file
View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>kosmopolit</title>
<meta name="description" content="description du site web">
<meta name="keywords" content="truc, bidule, chouette">
<link href="./styles/style.css" type="text/css" rel="stylesheet">
<link href="./styles/index2.css" type="text/css" rel="stylesheet">
<style> html {visibility: hidden; opacity: 0;} </style>
</head>
<body>
<main class="index">
<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>
</main>
</body>
</html>

10
styles/index.css
View File

@@ -93,8 +93,10 @@ body main {
/*------------------------------------------*/
/*THE ANIMATION*/
@keyframes rotation {
from {transform: rotate(0deg); transform-origin: 50% 51%;}
to {transform: rotate(360deg); transform-origin: 50% 50%;}
0% {transform: rotate(0deg); transform-origin: 49% 50%;}
50% {transform: rotate(360deg); transform-origin: 49% 50%;}
50.1% {transform: rotate(360deg); transform-origin: 51% 50%;}
100% {transform: rotate(0deg); transform-origin: 51% 50%;}
}
.logo_bubbles .circle {
animation-name: rotation;
@@ -104,7 +106,7 @@ body main {
animation-direction: normal;
}
.logo_bubbles .circle._1 {
animation-duration: 1s;
animation-duration: 2s;
animation-delay: 0s;
animation-direction: reverse;
}
@@ -114,7 +116,7 @@ body main {
animation-direction: reverse;
}
.logo_bubbles .circle._3 {
animation-duration: 1.5s;
animation-duration: 1s;
animation-delay: 0.3s;
}
.logo_bubbles .circle._4 {

156
styles/index2.css Normal file
View File

@@ -0,0 +1,156 @@
/*------------------------------------------*/
/*ACCUEIL*/
body main {
display: flex;
flex-direction: column;
height: 100vh;
margin: auto;
padding: 0px;
}
.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;
width: 100%;
}
.logo_bubbles > ._ratio {
padding-top: 70%;
}
.circle > ._ratio {
padding-top: 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 rotation {
0% {transform: rotate(0deg); transform-origin: 49% 50%;}
50% {transform: rotate(360deg); transform-origin: 49% 50%;}
50.1% {transform: rotate(360deg); transform-origin: 51% 50%;}
100% {transform: rotate(0deg); transform-origin: 51% 50%;}
}
.logo_bubbles .circle {
animation-name: rotation;
animation-delay: 0s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
}
.logo_bubbles .circle._1 {
animation-duration: 2s;
animation-delay: 0s;
animation-direction: reverse;
}
.logo_bubbles .circle._2 {
animation-duration: 2s;
animation-delay: 0.7s;
animation-direction: reverse;
}
.logo_bubbles .circle._3 {
animation-duration: 1s;
animation-delay: 0.3s;
}
.logo_bubbles .circle._4 {
animation-duration: 1s;
animation-delay: 0.5s;
animation-direction: reverse;
}
/*------------------------------------------*/
/*LINKS*/
.logo_links > * {
margin: auto;
padding: 0px;
}
.logo_links > :first-child {
margin-left: 0px;
}
.logo_links > :last-child {
margin-right: 0px;
}
.logo_links #kosmopolit a {
color: var(--color-purple);
}
.logo_links #litterall a {
color: var(--color-green);
}
.logo_links #lea a {
color: var(--color-water);
}
.logo_links #actualites a {
color: hsl(59, 100%, 40%);
}