Martin_Rattensberger_IT_Services/thenextbigthing
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

erste version für upload

Browse Source
This commit is contained in:
Martin Rattensberger
2024-10-07 00:11:09 +02:00
parent d0b36169dc
commit 5e2791a35c
2 changed files with 97 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
animation.html
View File

@@ -2,11 +2,11 @@
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animation</title>
<style>
body {
display: flex;
flex-direction: column; /* Texte untereinander anordnen */
justify-content: center;
align-items: center;
height: 100vh;
@@ -15,39 +15,111 @@
font-family: 'Courier New', Courier, monospace;
overflow: hidden;
}
.text {
position: absolute;
.text, .text1, .text3 {
font-size: 2em;
opacity: 0.8;
white-space: nowrap;
overflow: hidden;
border-right: 0.15em solid orange;
}
.typewriter {
animation: typing 3.5s steps(30, end), blink-caret 0.75s step-end infinite;
}
.fade {
animation: fadeText 6s infinite;
opacity: 0;
width: 0ch; /* Initiale Breite für die Typing-Animation */
border-right: 0.15em solid transparent; /* Cursor initial unsichtbar */
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
.text1, .text3 {
margin-top: 20px;
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: orange; }
/* Breite von .text3 auf auto setzen */
.text3 {
width: auto;
}
@keyframes fadeText {
0%, 33% { opacity: 0; }
34%, 66% { opacity: 1; }
67%, 100% { opacity: 0; }
.textFirst {
animation: animationFirst 18s steps(21, end) infinite;
}
.textSecond {
animation: animationSecond 18s steps(10, end) infinite;
}
.textThird {
animation: animationThird 18s linear infinite;
}
@keyframes animationFirst {
0% {
width: 0ch;
opacity: 0;
border-right-color: orange;
}
5% {
opacity: 1;
}
15% {
width: 21ch;
opacity: 1;
border-right-color: orange;
}
15.1% {
width: 21ch;
opacity: 1;
border-right-color: transparent;
}
50% {
opacity: 1;
}
60% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes animationSecond {
15% {
width: 0ch;
opacity: 0;
border-right-color: transparent;
}
20% {
opacity: 1;
border-right-color: orange;
}
30% {
width: 10ch;
opacity: 1;
border-right-color: orange;
}
30.1% {
width: 10ch;
opacity: 1;
border-right-color: transparent;
}
50% {
opacity: 1;
}
60% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@keyframes animationThird {
0%, 60% {
opacity: 0;
}
65% {
opacity: 1;
}
85% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="text typewriter">The Next BIG Thing...</div>
<div class="text fade" style="animation-delay: 4s;">stay tuned</div>
<div class="text fade" style="animation-delay: 8s;">coming soon</div>
<div class="text textFirst">the next BIG thing...</div>
<div class="text1 textSecond">stay tuned</div>
<div class="text3 textThird">coming soon</div>
</body>
</html>