Animations
這個提交存在於：
父節點
2de752322e
當前提交
635339aba4
共有 2 個檔案被更改，包括 61 行新增 和 12 行删除
58
CSS/menu.css
58
CSS/menu.css
|
|
@ -21,21 +21,20 @@ header{
|
||||||
|
|
||||||
font-size:4.5vw;
|
font-size:4.5vw;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background: -webkit-linear-gradient(#BF0909 0%, #4F0101 100%);
|
color:#a30909;
|
||||||
-webkit-background-clip: text;
|
}
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
-webkit-animation: glow 1s ease-in-out infinite alternate;
|
.glow{
|
||||||
-moz-animation: glow 1s ease-in-out infinite alternate;
|
|
||||||
animation: glow 1s ease-in-out infinite alternate;
|
animation: glow 1s ease-in-out infinite alternate;
|
||||||
}
|
}
|
||||||
|
|
||||||
@-webkit-keyframes glow {
|
@keyframes glow {
|
||||||
from {
|
from {
|
||||||
text-shadow: 0 0 30px #e50022, 0 0 40px #e50022, 0 0 50px #e50022, 0 0 60px #e50022, 0 0 70px #e50022;
|
text-shadow: 0 0 10px #494949, 0 0 20px #494949,0 0 30px #494949, 0 0 40px #494949;
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
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;
|
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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -55,19 +54,58 @@ main{
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
main section article span{
|
||||||
|
width:16vw;
|
||||||
|
display:flex;
|
||||||
|
justify-content:center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
main section article span span {
|
||||||
|
opacity:0;
|
||||||
|
animation: fade-text 1s forwards;
|
||||||
|
font-size:3vw;
|
||||||
|
margin-right:-0.2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#B{animation-delay:0.3s}
|
||||||
|
#i{animation-delay:0.6s}
|
||||||
|
#e1{animation-delay:0.9s}
|
||||||
|
#n1{animation-delay:1.2s}
|
||||||
|
#v{animation-delay:1.5s}
|
||||||
|
#e2{animation-delay:1.8s}
|
||||||
|
#n2{animation-delay:2.1s}
|
||||||
|
#u{animation-delay:2.4s}
|
||||||
|
#e3{animation-delay:2.7s}
|
||||||
|
|
||||||
|
@keyframes fade-text {
|
||||||
|
0% {opacity :0}
|
||||||
|
100% {opacity:1}
|
||||||
|
}
|
||||||
|
|
||||||
#introTxt{
|
#introTxt{
|
||||||
|
opacity:0;
|
||||||
font-size:2vw;
|
font-size:2vw;
|
||||||
|
animation:fade-text 1s forwards;
|
||||||
|
animation-delay:3.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#pseudoTxt{
|
#pseudoTxt{
|
||||||
|
opacity:0;
|
||||||
font-size:2vw;
|
font-size:2vw;
|
||||||
|
animation:fade-text 1s forwards;
|
||||||
|
animation-delay:5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#pseudoInput{
|
#pseudoInput{
|
||||||
|
opacity:0;
|
||||||
font-family:'Special Elite',cursive;
|
font-family:'Special Elite',cursive;
|
||||||
font-size:1.8vw;
|
font-size:1.8vw;
|
||||||
border-radius:1vw;
|
border-radius:1vw;
|
||||||
padding:0.3vw 0.5vw 0.3vw 0.5vw;
|
padding:0.3vw 1vw 0vw 0.5vw;
|
||||||
|
animation:fade-text 1s forwards;
|
||||||
|
animation-delay:5s;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#pseudoInput:focus{
|
#pseudoInput:focus{
|
||||||
|
|
@ -75,7 +113,7 @@ main{
|
||||||
font-family:'Special Elite',cursive;
|
font-family:'Special Elite',cursive;
|
||||||
font-size:1.8vw;
|
font-size:1.8vw;
|
||||||
border-radius:1vw;
|
border-radius:1vw;
|
||||||
padding:0.3vw 0.5vw 0.3vw 0.5vw;
|
padding:0.3vw 1vw 0vw 0.5vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer{
|
footer{
|
||||||
|
|
|
||||||
|
|
@ -10,12 +10,23 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<p id="headerTxt">INSAïde</p>
|
<p class="glow" id="headerTxt">INSAïde</p>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<section>
|
<section>
|
||||||
<article>
|
<article>
|
||||||
<p id="introTxt">Bienvenue, pour commencer l'aventure, veuillez renseigner votre identité</p>
|
<span>
|
||||||
|
<span id="B">B</span>
|
||||||
|
<span id="i">i</span>
|
||||||
|
<span id="e1">e</span>
|
||||||
|
<span id="n1">n</span>
|
||||||
|
<span id="v">v</span>
|
||||||
|
<span id="e2">e</span>
|
||||||
|
<span id="n2">n</span>
|
||||||
|
<span id="u">u</span>
|
||||||
|
<span id="e3">e</span>
|
||||||
|
</span>
|
||||||
|
<p id="introTxt">Pour commencer l'aventure, veuillez renseigner votre identité</p>
|
||||||
<p id="pseudoTxt">Entrez votre pseudo</p>
|
<p id="pseudoTxt">Entrez votre pseudo</p>
|
||||||
<input id="pseudoInput" type="text"/>
|
<input id="pseudoInput" type="text"/>
|
||||||
</article>
|
</article>
|
||||||
|
|
|
||||||
載入中…
新增問題並參考