hxcde/yannmoelle
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

„css/skeleton-auto.css“ ändern

Browse Source
This commit is contained in:
Yann Mölle 2023-05-29 14:27:40 +02:00
parent 7ba98732d9
commit e9207ffa3d
1 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
css/skeleton-auto.css
View File

@ -284,23 +284,28 @@ hr {
.animate-zoom-6 {animation:animatezoom 1.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.animate-zoom-7 {animation:animatezoom 1.8s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
/* DEMO-SPECIFIC STYLES */
.typed {
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
color: #fff;
font-family: monospace;
font-size: 2em;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(30, end),
blink-caret .5s step-end infinite;
}
/* The typing effect */
@keyframes typing {
from {
width: 0
}
from { width: 0 }
to { width: 100% }
}
@keyframes blink {
50% {
border-color: transparent
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange }
}