Browse Source

Animations

Baptiste Marty 3 years ago
parent
commit
635339aba4
2 changed files with 61 additions and 12 deletions
  1. 48
    10
      CSS/menu.css
  2. 13
    2
      HTML/menu.html

+ 48
- 10
CSS/menu.css View File

@@ -21,21 +21,20 @@ header{
21 21
     
22 22
     font-size:4.5vw;
23 23
     font-weight: bold;
24
-    background: -webkit-linear-gradient(#BF0909 0%, #4F0101 100%);
25
-    -webkit-background-clip: text;
26
-    -webkit-text-fill-color: transparent;
27
-    -webkit-animation: glow 1s ease-in-out infinite alternate;
28
-    -moz-animation: glow 1s ease-in-out infinite alternate;
24
+    color:#a30909;
25
+}
26
+
27
+.glow{
29 28
     animation: glow 1s ease-in-out infinite alternate;
30 29
 }
31 30
 
32
-@-webkit-keyframes glow {
31
+@keyframes glow {
33 32
   from {
34
-    text-shadow: 0 0 30px #e50022, 0 0 40px #e50022, 0 0 50px #e50022, 0 0 60px #e50022, 0 0 70px #e50022;
33
+    text-shadow: 0 0 10px #494949, 0 0 20px #494949,0 0 30px #494949, 0 0 40px #494949;
35 34
   }
36 35
 
37 36
   to {
38
-    text-shadow: 0 0 30px #e20000, 0 0 40px #e20000, 0 0 50px #e20000, 0 0 60px #e20000, 0 0 70px #e20000, 0 0 80px #e20000, 0 0 90px #e20000;
37
+    text-shadow: 0 0 20px #494949,0 0 30px #494949, 0 0 40px #494949, 0 0 50px #494949, 0 0 60px #494949, 0 0 70px #494949, 0 0 80px #494949, 0 0 90px #494949;
39 38
   }
40 39
 }
41 40
 
@@ -55,19 +54,58 @@ main{
55 54
         align-items: center;
56 55
     }
57 56
 
57
+    main section article span{
58
+        width:16vw;
59
+        display:flex;
60
+        justify-content:center;
61
+        align-items: center;
62
+    }
63
+
64
+        main section article span span {
65
+            opacity:0;
66
+            animation: fade-text 1s forwards;
67
+            font-size:3vw;
68
+            margin-right:-0.2vw;
69
+        }
70
+
71
+        #B{animation-delay:0.3s}
72
+        #i{animation-delay:0.6s}
73
+        #e1{animation-delay:0.9s}
74
+        #n1{animation-delay:1.2s}
75
+        #v{animation-delay:1.5s}
76
+        #e2{animation-delay:1.8s}
77
+        #n2{animation-delay:2.1s}
78
+        #u{animation-delay:2.4s}
79
+        #e3{animation-delay:2.7s}
80
+
81
+        @keyframes fade-text {
82
+            0% {opacity :0}
83
+            100% {opacity:1}
84
+        }
85
+
58 86
         #introTxt{
87
+            opacity:0;
59 88
             font-size:2vw;
89
+            animation:fade-text 1s forwards;
90
+            animation-delay:3.5s;
60 91
         }
61 92
 
62 93
         #pseudoTxt{
94
+            opacity:0;
63 95
             font-size:2vw;
96
+            animation:fade-text 1s forwards;
97
+            animation-delay:5s;
64 98
         }
65 99
 
66 100
         #pseudoInput{
101
+            opacity:0;
67 102
             font-family:'Special Elite',cursive;
68 103
             font-size:1.8vw;
69 104
             border-radius:1vw;
70
-            padding:0.3vw 0.5vw 0.3vw 0.5vw;
105
+            padding:0.3vw 1vw 0vw 0.5vw;
106
+            animation:fade-text 1s forwards;
107
+            animation-delay:5s;
108
+            
71 109
         }
72 110
 
73 111
         #pseudoInput:focus{
@@ -75,7 +113,7 @@ main{
75 113
             font-family:'Special Elite',cursive;
76 114
             font-size:1.8vw;
77 115
             border-radius:1vw;
78
-            padding:0.3vw 0.5vw 0.3vw 0.5vw;
116
+            padding:0.3vw 1vw 0vw 0.5vw;
79 117
         }
80 118
 
81 119
 footer{

+ 13
- 2
HTML/menu.html View File

@@ -10,12 +10,23 @@
10 10
 </head>
11 11
 <body>
12 12
     <header>
13
-        <p id="headerTxt">INSAïde</p>
13
+        <p class="glow" id="headerTxt">INSAïde</p>
14 14
     </header>
15 15
     <main>
16 16
         <section>
17 17
             <article>
18
-                <p id="introTxt">Bienvenue, pour commencer l'aventure, veuillez renseigner votre identité</p>
18
+                <span>
19
+                    <span id="B">B</span>
20
+                    <span id="i">i</span>
21
+                    <span id="e1">e</span>
22
+                    <span id="n1">n</span>
23
+                    <span id="v">v</span>
24
+                    <span id="e2">e</span>
25
+                    <span id="n2">n</span>
26
+                    <span id="u">u</span>
27
+                    <span id="e3">e</span>
28
+                </span>
29
+                <p id="introTxt">Pour commencer l'aventure, veuillez renseigner votre identité</p>
19 30
                 <p id="pseudoTxt">Entrez votre pseudo</p>
20 31
                 <input id="pseudoInput" type="text"/>
21 32
             </article>

Loading…
Cancel
Save