Ceci est une version archivée de EssaI39 à 2023-09-21 18:35:44
""<!DOCTYPE html><html lang="en">
<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <style>
- /* Style du rectangle */
- #rectangle-container {
- position: relative;
- width: 200px;
- height: 50px;
- }
- #rectangle {
- position:relative;
- left: 100px;
- top: 20%;
- transform: translate(-50%, -50%);
- width: 100%;
- height: 100%;
- background-color: red; /* Couleur initiale */
- text-align: center;
- line-height: 50px;
- font-size: 12px;
- color: white; /* Couleur du texte */
- transition: background-color 2s; /* Transition de couleur */
- animation: colorFade 5s linear infinite; /* Animation de fondu */
- }
- /* Animation de fondu */
- @keyframes colorFade {
- 0% { background-color: red; }
- 25% { background-color: blue; }
- 50% { background-color: green; }
- 75% { background-color: yellow; }
- 100% { background-color: red; }
- }
- </style>
<body>
- <div id="rectangle-container">
- <div id="rectangle">LES VACANCES SONT FINIES</div>
- </div>
</html>