Spaces:
Running
Running
File size: 1,896 Bytes
a146d83 d7e960f 196faa4 a146d83 c262010 a146d83 bc7cc03 a146d83 d4c3fc9 5261cce d4c3fc9 5261cce d4c3fc9 c0efe1f c262010 4c7a4fd c262010 d4c3fc9 c0efe1f bc7cc03 d4c3fc9 c0efe1f d4c3fc9 4c7a4fd bc7cc03 c262010 c0efe1f bc7cc03 c262010 bc7cc03 c262010 c0efe1f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
:root {
--sky-gradient-start: #87CEEB;
--sky-gradient-end: #1E90FF;
}
body {
min-height: 100vh;
overflow-x: hidden;
padding: 20px;
background: transparent;
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes sky-pulse {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.cloud-container {
position: relative;
background: transparent;
}
.cloud {
position: absolute;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
box-shadow: 0 4px 30px rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #333;
cursor: pointer;
transition: all 0.5s ease;
animation: float 3s ease-in-out infinite;
will-change: transform;
z-index: 10;
}
#cloud-container {
position: relative;
width: 100%;
height: 400px;
margin: 2rem 0;
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);
overflow: hidden;
}
custom-cloud {
display: block;
position: absolute;
transition: all 0.5s ease;
animation: float 4s ease-in-out infinite;
will-change: transform;
cursor: pointer;
transform: translate(-50%, -50%);
}
custom-cloud:hover {
transform: translate(-50%, -50%) scale(1.1) !important;
z-index: 100;
animation-duration: 2s;
}
.cloud-text {
position: relative;
z-index: 2;
text-align: center;
}
.cloud-percentage {
font-size: 0.6em;
display: block;
margin-top: 4px;
color: #666;
}
#text-input:focus {
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}
#analyze-btn {
transition: all 0.2s ease;
}
#analyze-btn:hover {
transform: translateY(-50%) scale(1.1);
}
|