animated background
This commit is contained in:
@@ -338,109 +338,33 @@ footer h2 {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5rem; }
|
||||
|
||||
@keyframes animateCircle_pop_trans {
|
||||
0% {
|
||||
stroke: #000000;
|
||||
/* Initial stroke color */ }
|
||||
100% {
|
||||
stroke: #ff0000;
|
||||
/* Final stroke color */ } }
|
||||
/* Link the SVG file */
|
||||
body {
|
||||
/* background-image: url('../images/fond-ronds.svg'); */
|
||||
/* Add other background properties as needed */
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
/* Adjust as needed */
|
||||
background-size: cover;
|
||||
/* Adjust as needed */ }
|
||||
|
||||
@keyframes animateCircle_pop_trans-2 {
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
fill: #ffffff;
|
||||
/* Initial fill color */ }
|
||||
transform: scale(0); }
|
||||
100% {
|
||||
fill: #00ff00;
|
||||
/* Final fill color */ } }
|
||||
transform: scale(0.5); } }
|
||||
|
||||
@keyframes animateCircle_vert_clair_erable {
|
||||
0% {
|
||||
stroke: #000000;
|
||||
/* Initial stroke color */ }
|
||||
100% {
|
||||
stroke: #ff0000;
|
||||
/* Final stroke color */ } }
|
||||
@keyframes slidein {
|
||||
from {
|
||||
transform: translateX(20%); }
|
||||
to {
|
||||
transform: translateX(70%); } }
|
||||
|
||||
@keyframes animateCircle_vert_clair_erable-93 {
|
||||
0% {
|
||||
fill: #ffffff;
|
||||
/* Initial fill color */ }
|
||||
100% {
|
||||
fill: #00ff00;
|
||||
/* Final fill color */ } }
|
||||
|
||||
@keyframes animateCircle_vert_clair_erable-9 {
|
||||
0% {
|
||||
stroke: #000000;
|
||||
/* Initial stroke color */ }
|
||||
100% {
|
||||
stroke: #ff0000;
|
||||
/* Final stroke color */ } }
|
||||
|
||||
@keyframes animateCircle_vert_clair_erable-3 {
|
||||
0% {
|
||||
fill: #ffffff;
|
||||
/* Initial fill color */ }
|
||||
100% {
|
||||
fill: #00ff00;
|
||||
/* Final fill color */ } }
|
||||
|
||||
@keyframes animateCircle_vert_clair_erable-3-1 {
|
||||
0% {
|
||||
stroke: #000000;
|
||||
/* Initial stroke color */ }
|
||||
100% {
|
||||
stroke: #ff0000;
|
||||
/* Final stroke color */ } }
|
||||
|
||||
@keyframes animateCircle_vert_clair_erable-3-1-7 {
|
||||
0% {
|
||||
fill: #ffffff;
|
||||
/* Initial fill color */ }
|
||||
100% {
|
||||
fill: #00ff00;
|
||||
/* Final fill color */ } }
|
||||
|
||||
@keyframes animateCircle_vert_erable {
|
||||
0% {
|
||||
stroke: #000000;
|
||||
/* Initial stroke color */ }
|
||||
100% {
|
||||
stroke: #ff0000;
|
||||
/* Final stroke color */ } }
|
||||
|
||||
@keyframes animateCircle_vert_erable-4 {
|
||||
0% {
|
||||
fill: #ffffff;
|
||||
/* Initial fill color */ }
|
||||
100% {
|
||||
fill: #00ff00;
|
||||
/* Final fill color */ } }
|
||||
|
||||
@keyframes animateCircle_vert_erable-4-6 {
|
||||
0% {
|
||||
stroke: #000000;
|
||||
/* Initial stroke color */ }
|
||||
100% {
|
||||
stroke: #ff0000;
|
||||
/* Final stroke color */ } }
|
||||
|
||||
@keyframes animateCircle_vert_erable-4-3 {
|
||||
0% {
|
||||
fill: #ffffff;
|
||||
/* Initial fill color */ }
|
||||
100% {
|
||||
fill: #00ff00;
|
||||
/* Final fill color */ } }
|
||||
|
||||
@keyframes animateCircle_vert_erable-2 {
|
||||
0% {
|
||||
stroke: #000000;
|
||||
/* Initial stroke color */ }
|
||||
100% {
|
||||
stroke: #ff0000;
|
||||
/* Final stroke color */ } }
|
||||
@keyframes dropDown {
|
||||
from {
|
||||
transform: translateY(20%); }
|
||||
to {
|
||||
transform: translateY(70%); } }
|
||||
|
||||
@keyframes translateAnimation {
|
||||
0% {
|
||||
@@ -452,57 +376,72 @@ footer h2 {
|
||||
transform: translateX(500px);
|
||||
/* End translation */ } }
|
||||
|
||||
@keyframes animateCircle_orange-7 {
|
||||
@keyframes changeColor {
|
||||
0% {
|
||||
stroke: #000000;
|
||||
/* Initial stroke color */ }
|
||||
100% {
|
||||
stroke: #ff0000;
|
||||
/* Final stroke color */ } }
|
||||
|
||||
@keyframes animateCircle_orange-2 {
|
||||
0% {
|
||||
fill: #ffffff;
|
||||
fill: #b9ce00;
|
||||
/* Initial fill color */ }
|
||||
100% {
|
||||
fill: #00ff00;
|
||||
fill: #ff804d;
|
||||
/* Final fill color */ } }
|
||||
|
||||
@keyframes animateCircle_orange-9 {
|
||||
@keyframes changeColor2 {
|
||||
0% {
|
||||
stroke: #000000;
|
||||
/* Initial stroke color */ }
|
||||
100% {
|
||||
stroke: #ff0000;
|
||||
/* Final stroke color */ } }
|
||||
|
||||
@keyframes animateCircle_orange {
|
||||
0% {
|
||||
fill: #ffffff;
|
||||
fill: #038788;
|
||||
/* Initial fill color */ }
|
||||
100% {
|
||||
fill: #00ff00;
|
||||
fill: #349a84;
|
||||
/* Final fill color */ } }
|
||||
|
||||
@keyframes slidein {
|
||||
from {
|
||||
transform: translateX(0%); }
|
||||
to {
|
||||
transform: translateX(100%); } }
|
||||
/* Apply styles to the SVG paths
|
||||
#circle_pop_trans,
|
||||
#circle_pop_trans-2,
|
||||
/* Add other SVG IDs or classes here */
|
||||
#circle_orange {
|
||||
/* Add styles to your SVG paths */
|
||||
/* Example animation */
|
||||
/* animation: pulse 2s infinite alternate; */
|
||||
/* animation: dropDown 2s infinite alternate; */
|
||||
/* animation: pulse 2s infinite alternate; */ }
|
||||
|
||||
/* Add more keyframes for other paths as needed */
|
||||
#circle_pop_trans {
|
||||
animation-name: translateAnimation;
|
||||
animation-duration: 13s;
|
||||
animation-repeat: infinite;
|
||||
animation-delay: 1s;
|
||||
animation-fill-mode: none; }
|
||||
#cercle_vert_erable-4-3 {
|
||||
animation: changeColor2 2s forwards; }
|
||||
|
||||
/* Apply styles to the SVG paths */
|
||||
#circle_vert_clair_erable-3-1 {
|
||||
animation: changeColor 2s forwards;
|
||||
/* animation: slidein 2s infinite alternate; */ }
|
||||
|
||||
#circle_orange-7 {
|
||||
/* animation: changeColor 2s infinite alternate; */ }
|
||||
|
||||
#circle_orange-6 {
|
||||
animation: slidein 2s infinite alternate;
|
||||
/* Animate fill color */ }
|
||||
/* Main animation for the football */
|
||||
/* animation: football-motion 2s linear infinite; */ }
|
||||
|
||||
#circle_orange-6-bis {
|
||||
/* Trailing effect animation */
|
||||
/* animation: trace-motion 2s linear infinite; */ }
|
||||
|
||||
@keyframes football-motion {
|
||||
0% {
|
||||
transform: translateX(0) translateY(0); }
|
||||
100% {
|
||||
transform: translateX(100px); } }
|
||||
|
||||
@keyframes trace-motion {
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
/* Adjust the opacity to control the visibility of the trace */
|
||||
/* Additional properties for the trailing effect */
|
||||
transform: translateX(0px) translateY(0);
|
||||
/* Adjust as needed */ }
|
||||
100% {
|
||||
opacity: 0.3;
|
||||
/* Make the trace disappear at the end */
|
||||
/* Additional properties for the trailing effect */
|
||||
transform: translateX(100px);
|
||||
/* Adjust as needed */ } }
|
||||
|
||||
/* Apply animations to other paths similarly */
|
||||
/*!
|
||||
* Hamburgers
|
||||
* @description Tasty CSS-animated hamburgers
|
||||
@@ -626,12 +565,19 @@ footer h2 {
|
||||
|
||||
body {
|
||||
position: relative; }
|
||||
body #content-ontop {
|
||||
z-index: 3000;
|
||||
position: relative;
|
||||
top: -1200px; }
|
||||
body #background-animated {
|
||||
z-index: 2000;
|
||||
position: relative;
|
||||
left: -350px; }
|
||||
body::before {
|
||||
z-index: -1;
|
||||
content: " ";
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../images/fond-ronds.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: content;
|
||||
display: block;
|
||||
@@ -1101,14 +1047,13 @@ header {
|
||||
width: min-content;
|
||||
margin-bottom: 0; }
|
||||
header .row #block-colloque2024-mainnavigation {
|
||||
width: max-content;
|
||||
display: none; }
|
||||
width: max-content; }
|
||||
header .row #block-colloque2024-mainnavigation .burger {
|
||||
padding-top: 0.25rem;
|
||||
z-index: 9999; }
|
||||
@media screen and (min-width: 1200px) {
|
||||
header .row #block-colloque2024-mainnavigation {
|
||||
display: block; }
|
||||
display: flex; }
|
||||
header .row #block-colloque2024-mainnavigation ul {
|
||||
margin-bottom: 0;
|
||||
flex-wrap: wrap; }
|
||||
@@ -1192,9 +1137,6 @@ header.front #block-colloque2024-branding {
|
||||
header.front #block-colloque2024-branding.is-active > div {
|
||||
max-height: 115px; }
|
||||
|
||||
header.front #block-colloque2024-renderedsitesettingsblock-2 {
|
||||
display: none; }
|
||||
|
||||
#block-colloque2024-submenu {
|
||||
margin: 1rem auto; }
|
||||
#block-colloque2024-submenu ul {
|
||||
|
||||
Reference in New Issue
Block a user