WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
सीएसएस क्यूब एनीमेशन HTML संरचना
731
byby.createsite
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
10 February 2025
सीएसएस लॉगिन फॉर्म
16 September 2025
3D कार्ड कैरोसेल HTML CSS JavaScript
28 September 2025
CSS लोडिंग एनीमेशन उदाहरण
HTML
Copy
CSS
Copy
* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #000; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; } .codigo { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #272822; color: #F8F8F2; font-family: 'Consolas', 'Monaco', monospace; font-size: 20px; padding: 20px; border-radius: 8px; white-space: pre-line; text-align: left; line-height: 1.6; max-height: 50%; width: 100%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .selector { color: #F92672; } .property { color: #66D9EF; } .value-number { color: #AE81FF; } .value-string { color: #E6DB74; } .value-color { color: #A6E22E; } .brace { color: #F8F8F2; } .comment { color: #75715E; } .function { color: #A6E22E; } .animation-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 100%; height: 50%; overflow: hidden; background-color: #000; } /* Estilos para a Animação-Cube */ .cube { position: relative; width: 100px; height: 100px; background-color: #ff0000; transform-style: preserve-3d; perspective: 500px; animation: glitch 2s infinite linear; } .face { position: absolute; width: 100%; height: 100%; background-color: #ffffff; display: flex; align-items: center; justify-content: center; opacity: 0.8; transition: background-color 0.2s ease-in-out; } .face:nth-child(1) { background-color: transparent; transform: translateZ(50px); } .face:nth-child(2) { background-color: #00ff00; transform: rotateY(180deg) translateZ(50px); } .face:nth-child(3) { background-color: #0000ff; transform: rotateY(90deg) translateZ(50px); } .face:nth-child(4) { transform: rotateY(-90deg) translateZ(50px); } .face:nth-child(5) { transform: rotateY(180deg) translateZ(50px); } .face:nth-child(6) { transform: rotateY(270deg) translateZ(50px); } @keyframes glitch { 0% { transform: translateZ(0); } 25% { transform: translateZ(5px) rotateX(5deg) rotateY(5deg); } 50% { transform: translateZ(0); } 75% { transform: translateZ(-5px) rotateX(-5deg) rotateY(-5deg); } 100% { transform: translateZ(0); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */