CSS ile bir karesel döngü

Open In Editor Publish Your Code

CSS ile bir karesel döngü

Recommended

22 July 2025

peek into the function

10 September 2024

Panda Login Form

18 June 2025

DarkSpace UI

HTML

CSS

/* Genel Ayarlar */

body {

min-height: 100vh;

background: linear-gradient(135deg, #1a1a1a, #333);

display: flex;

align-items: center;

justify-content: center;

margin: 0;

font-family: "Poppins", sans-serif;

overflow: hidden;

perspective: 1000px;

}

/* Şekil Konteyneri */

.shape-container {

position: relative;

width: 300px;

height: 300px;

perspective: 1000px;

}

/* 3D Şekiller */

.shape {

position: absolute;

width: 100px;

height: 100px;

background: linear-gradient(135deg, #ff6347, #ff4500); /* Eski turuncu tonları */

border-radius: 12px;

box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);

transform-style: preserve-3d;

animation: rotateShape 6s infinite linear;

}

.shape:nth-child(1) {

top: 0;

left: 0;

transform: translateZ(50px);

}

.shape:nth-child(2) {

top: 0;

right: 0;

transform: translateZ(-50px);

background: #CFE1B9; /* Ortadaki şekil için #CFE1B9 rengi */

}

.shape:nth-child(3) {

bottom: 0;

left: 0;

transform: translateZ(100px);

background: linear-gradient(135deg, #1e90ff, #00bfff);

}

.shape:nth-child(4) {

bottom: 0;

right: 0;

transform: translateZ(-100px);

background: linear-gradient(135deg, #32cd32, #00ff7f);

}

@keyframes rotateShape {

0% {

transform: rotateX(0) rotateY(0);

}

100% {

transform: rotateX(360deg) rotateY(360deg);

}

}

/* Logo Alanı */

.logo {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%) rotateX(25deg);

width: 150px;

height: 150px;

background: radial-gradient(circle, #ff4500, #ff6347);

border-radius: 50%;

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);

display: flex;

align-items: center;

justify-content: center;

}

.logo img {

display: none; /* Resmi kaldırdım */

}

/* Modern Buton */

.button {

position: absolute;

bottom: 10%;

left: 50%;

transform: translateX(-50%);

padding: 0.8rem 1.5rem;

font-size: 1.2rem;

font-weight: bold;

color: #fff;

background: linear-gradient(135deg, #ff4500, #ff6347);

border: none;

border-radius: 25px;

cursor: pointer;

box-shadow: 0 10px 20px rgba(255, 69, 0, 0.5);

transition: all 0.3s ease;

}

.button:hover {

background: linear-gradient(135deg, #ff6347, #ff4500);

transform: scale(1.1);

}

JS