diff --git a/programmieren/spiele/Flappy-Witch/index.html b/programmieren/spiele/Flappy-Witch/index.html
index 0c824c9..32c5b21 100644
--- a/programmieren/spiele/Flappy-Witch/index.html
+++ b/programmieren/spiele/Flappy-Witch/index.html
@@ -65,127 +65,55 @@
color: white;
font-size: 1.5em; /* Textgröße anpassen */
}
- .icon-container {
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 8px 10px;
- background-color: #ffffff;
- border-radius: 50%;
- box-shadow: inset 0 -2px 4px 0 #c6c6c6, 0 3px 6px rgba(0, 0, 0, 0.25);
- text-align: center;
- z-index: 10;
- }
- .icon-container .icon {
- width: 25px;
- height: 30px;
- stroke: #592cd6;
- margin-top: -2px;
- z-index: 4;
- transform: rotate(180deg);
- }
- .content {
- pointer-events: none;
- display: flex;
- align-items: center;
- justify-content: center;
- z-index: 1;
- position: relative;
- height: 100%;
- width: 100%;
- padding: 4px;
- gap: 16px;
- border-radius: 7px;
- font-weight: 600;
- transition: all 0.3s ease;
- }
- .content::before {
- content: "";
- inset: 0;
- position: absolute;
- z-index: 10;
- width: 80%;
- top: 45%;
- bottom: 35%;
- opacity: 0.7;
- margin: auto;
- background: linear-gradient(to bottom, transparent, var(--purple-400));
- filter: brightness(1.3) blur(5px);
- }
- .letters {
- transition: all 0.3s ease;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 4px;
- }
- .letters span {
- display: block;
- color: transparent;
- position: relative;
- left: 6px;
- animation: letterShow 1.2s ease backwards calc(var(--i) * 0.03s);
- }
- .letters span::before, .letters span::after {
- content: attr(data-label);
- position: absolute;
- color: var(--white);
- text-shadow: -1px 1px 2px var(--purple-500);
- left: 0;
- }
- .letters span::before {
- opacity: 0;
- transform: translateY(-100%);
- }
- .button:hover .words {
- opacity: 1;
- }
- .button:hover .letters span::before {
- animation: letterShow 0.7s ease calc(var(--i) * 0.03s);
- }
- .button:hover .letters span::after {
- opacity: 1;
- animation: letterHide 0.7s ease calc(var(--i) * 0.03s);
- }
- @keyframes letterShow {
- 0% {
- transform: translateY(50%);
- opacity: 0;
- filter: blur(20px);
- }
- 20% {
- transform: translateY(70%);
- opacity: 1;
- }
- 50% {
- transform: translateY(-15%);
- opacity: 1;
- filter: blur(0);
- }
- 100% {
- transform: translateY(0);
- opacity: 1;
- }
- }
- @keyframes letterHide {
- 0% {
- transform: translateY(0);
- opacity: 1;
- }
- 100% {
- transform: translateY(-70%);
- opacity: 0;
- filter: blur(3px);
- }
- }
-
+
Creative Crafter
Flappy Witch
+
+
+
+
+
+
+
