Diagramma di Venn animato

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

10 December 2024

<!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>

Diagramma di Venn animato

Consigliato

Clone di Spotify

Modulo di accesso CSS

Un codice di Mete

HTML

CSS

JS

Consigliato

Clone di Spotify

Modulo di accesso CSS

Un codice di Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS