Um loop quadrático com CSS

1478 Metehan

Abrir no Editor Publique Seu Código

Recomendado

21 September 2024

Menu Móvel

11 March 2025

Um código por stevenolaeem

19 May 2025

animação

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

}

Recomendado

Menu Móvel

Um código por stevenolaeem

animação

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS