Une boucle quadratique avec CSS

1,905 Metehan

Ouvrir dans l'éditeur Publiez votre code

Recommandé

20 June 2025

Formulaire d'inscription de connexion HTML avec effet de carte 3D

26 April 2025

Un code par shasshan7236

8 June 2025

Un code par programmationant

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);

}