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

added button and css to make the record easier

Browse Source
This commit is contained in:
asus
2024-05-26 13:31:01 +02:00
parent 5fb2973fde
commit e43bcce6b1
2 changed files with 36 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
old/index.html
View File

@@ -17,6 +17,7 @@
<img src="./docs/accueil/logo_ecritures.png" alt="logo kosmopolit"> <img src="./docs/accueil/logo_ecritures.png" alt="logo kosmopolit">
</div> </div>
<div class="logo_bubbles"> <div class="logo_bubbles">
<input type="checkbox" id="toggle_animate">
<div class="_ratio"> <div class="_ratio">
<div class="circle _2"><div class="_ratio"></div></div> <div class="circle _2"><div class="_ratio"></div></div>
<div class="circle _3"><div class="_ratio"></div></div> <div class="circle _3"><div class="_ratio"></div></div>

56
old/styles/index.css
View File

@@ -94,37 +94,47 @@ body main {
/*THE ANIMATION*/ /*THE ANIMATION*/
@keyframes position { @keyframes position {
0% {transform: translate( 0%, 0%);} 0% {transform: translate( 0%, 0%);}
20% {transform: translate( 1%, -1%);} 20% {transform: translate( 2%, -2%);}
30% {transform: translate(-1%, 0%);} 30% {transform: translate(-2%, 0%);}
40% {transform: translate( 1%, -1%);} 40% {transform: translate( 2%, -2%);}
50% {transform: translate( 0%, 1%);} 50% {transform: translate( 0%, 2%);}
60% {transform: translate( 1%, -1%);} 60% {transform: translate( 2%, -2%);}
70% {transform: translate( 0%, 0%);} 70% {transform: translate( 0%, 0%);}
80% {transform: translate(-1%, -1%);} 80% {transform: translate(-2%, -2%);}
90% {transform: translate( 1%, -1%);} 90% {transform: translate( 2%, -2%);}
100% {transform: translate( 0%, 0%);} 100% {transform: translate( 0%, 0%);}
} }
#toggle_animate {
position: fixed;
top: 100px;
left: 100px;
}
#toggle_animate:checked + ._ratio .circle {
/*
.logo_bubbles .circle { .logo_bubbles .circle {
*/
animation-name: position; 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-iteration-count: 2;
animation-direction: alternate; animation-direction: alternate;
} &._1 {
.logo_bubbles .circle._1 { animation-delay: -0.8s;
animation-delay: -0.8s; animation-direction: reverse;
animation-direction: reverse; }
} &._2 {
.logo_bubbles .circle._2 { animation-delay: -2.7s;
animation-delay: -2.7s; }
} &._3 {
.logo_bubbles .circle._3 { animation-delay: -1.3s;
animation-delay: -1.3s; animation-direction: reverse;
animation-direction: reverse; }
} &._4 {
.logo_bubbles .circle._4 { animation-delay: 0s;
animation-delay: 0s; animation-iteration-count: 1;
}
} }
@@ -139,10 +149,14 @@ body main {
padding: 0px; padding: 0px;
} }
.logo_links > :first-child { .logo_links > :first-child {
/*
margin-left: 0px; margin-left: 0px;
*/
} }
.logo_links > :last-child { .logo_links > :last-child {
/*
margin-right: 0px; margin-right: 0px;
*/
} }
.logo_links #kosmopolit a { .logo_links #kosmopolit a {
color: var(--color-purple); color: var(--color-purple);