Diagramme de Venn animé

Ouvrir dans l'éditeur Publiez votre code

Recommandé

28 June 2025

Codage manuel de la page de connexion Facebook

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive Art: Venn & Butterfly</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

body {
            background: #000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            font-family: 'Arial', sans-serif;
            overflow-x: hidden;
        }

.art-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 40px;
            width: 100%;
            padding: 40px;
        }

/* Venn Diagram Styles */
        .venn {
            overflow: hidden;
            position: relative;
            border-radius: 50%;
            background: #0e2a23;
            text-transform: uppercase;
            font-size: 24px;
            color: white;
            font-weight: bold;
            line-height: 1;
            width: 80vmin;
            height: 80vmin;
            padding: 40px;
            margin: 0 auto;
            box-shadow: 0 0 30px rgba(80, 227, 194, 0.3);
        }

.venn:hover,
        .venn:hover *,
        .venn:hover *:after {
            animation-play-state: paused;
        }
        
        .venn > span {
            position: relative;
            z-index: 1;
            text-align: center;
            display: block;
            font-size: 32px;
        }
        
        .venn > span:nth-child(2) {
            position: absolute;
            inset: 53% 0 0 0;
        }

.venn__circles {
            position: absolute;
            inset: auto 0 12% 0;
            margin: auto;
            width: 78%;
            height: 73%;
            transform-origin: 50% 55%;
            animation: venn_rotate 7s linear infinite;
        }

.venn__circles i {
            animation: venn_rotate 7s linear infinite;
            animation-direction: reverse;
            position: absolute;
            bottom: 0;
            margin: auto;
            width: 62%;
            aspect-ratio: 1/ 1;
            border-radius: 50%;
            background: rgb(80 227 194 / 50%);
        }

.venn__circles i:nth-child(2) {
            --animation-delay: calc(-7s / 3 * 2);
            right: 0;
            bottom: 0;
        }

.venn__circles i:nth-child(3) {
            --animation-delay: calc(-7s / 3);
            left: 0;
            right: 0;
            bottom: auto;
        }
            
        .venn__circles em {
            font-style: normal;
            position: absolute;
            inset: 35% 5%;
            animation: venn_rotate 7s linear infinite;
            animation-delay: var(--animation-delay);
            display: flex;
            align-items: flex-end;
        }

.venn__circles em:after {
            content: attr(data-text);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 66.6666666%;
            animation: venn_rotate 7s linear infinite;
            animation-delay: var(--animation-delay);
            animation-direction: reverse;
        }

@keyframes venn_rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

/* Butterfly Styles */
        .butterfly-container {
            position: relative;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            animation: float 4s ease-in-out infinite;
            margin-top: 40px;
        }

@keyframes float {
            0%, 100% { transform: translateY(0) rotateX(-5deg); }
            50% { transform: translateY(-20px) rotateX(5deg); }
        }

.wing {
            position: absolute;
            width: 100px;
            height: 150px;
            transform-origin: right center;
            background: linear-gradient(45deg, #ff6b6b, #ffa3a3, #ffcccb);
            border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
            box-shadow: 0 0 20px rgba(255, 107, 107, 0.5);
            border: 1px solid #ff4757;
            animation: flap 0.8s ease-in-out infinite alternate;
        }

.wing.left {
            left: 0;
            top: 25px;
            transform: rotateY(30deg);
        }

.wing.right {
            right: 0;
            top: 25px;
            transform: rotateY(-30deg);
        }

.body {
            position: absolute;
            width: 10px;
            height: 120px;
            background: linear-gradient(to bottom, #2f3542, #57606f);
            left: 95px;
            top: 40px;
            border-radius: 5px;
            transform: translateZ(10px);
        }

.antenna {
            position: absolute;
            width: 2px;
            height: 30px;
            background: #2f3542;
            top: 40px;
            border-radius: 2px;
        }

.antenna.left {
            left: 95px;
            transform: rotate(-20deg) translateZ(5px);
        }

.antenna.right {
            left: 105px;
            transform: rotate(20deg) translateZ(5px);
        }

.antenna-tip {
            position: absolute;
            width: 6px;
            height: 6px;
            background: #ff6b6b;
            border-radius: 50%;
            top: -5px;
            left: -2px;
        }

@keyframes flap {
            0% { transform: rotateY(30deg); }
            100% { transform: rotateY(70deg); }
        }

.wing.right {
            animation-name: flap-right;
        }

@keyframes flap-right {
            0% { transform: rotateY(-30deg); }
            100% { transform: rotateY(-70deg); }
        }

.pattern {
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, transparent 30%, rgba(255, 255, 255, 0.3) 30%);
            background-size: 15px 15px;
            border-radius: inherit;
            opacity: 0.7;
        }

h1 {
            color: #50e3c2;
            text-align: center;
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

footer {
            color: #666;
            text-align: center;
            margin-top: 40px;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="art-container">
        <h1>Interactive Art Composition</h1>
        
        <div class="venn">
            <span>Impact</span>
            <span>IOP</span>

<footer>
            Hover over the Venn diagram to pause animations
        </footer>
    </div>
</body>
</html>

Diagramme de Venn animé

Recommandé

Un code de Mete

Un code par alejandrokundrah

Codage manuel de la page de connexion Facebook

HTML

CSS

JS

Recommandé

Un code de Mete

Un code par alejandrokundrah

Codage manuel de la page de connexion Facebook

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS