Pluma de ave

Abrir en el editor Publica tu código

Recomendado

13 April 2025

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feather Quill</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: black;
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-family: monospace;
            font-size: 3rem;
            color: white;
        }

.writing-scene {
            position: relative;
            scale: 0.5;
            transform: translateY(-50px);
        }

.quill {
            width: 60px;
            height: 100px;
            position: relative;
            animation: writing 3s ease-in-out infinite;
        }

.feather-shaft {
            position: absolute;
            left: 50%;
            top: 0;
            width: 2px;
            height: 100px;
            background: #FFFFFF;
            transform: translateX(-50%);
            z-index: 10;
        }

.feather-barb {
            position: absolute;
            background: #F5F5F5;
            border-radius: 0 15px 15px 0;
            opacity: 0.9;
        }

.barb-left {
            left: 50%;
            transform: translateX(-100%) rotate(-45deg);
        }

.barb-right {
            left: 50%;
            transform: rotate(45deg);
        }

.barb-1 { top: 5px; width: 20px; height: 6px; }
        .barb-2 { top: 15px; width: 25px; height: 8px; }
        .barb-3 { top: 30px; width: 30px; height: 10px; }
        .barb-4 { top: 50px; width: 25px; height: 8px; }
        .barb-5 { top: 70px; width: 15px; height: 6px; }

.nib {
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 3px;
            height: 15px;
            background: #000000;
            z-index: 15;
        }

.paper {
            position: absolute;
            bottom: -80px;
            left: -100px;
            width: 200px;
            height: 100px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 5px;
        }

.text-line {
            position: absolute;
            height: 2px;
            background: #FFFFFF;
            opacity: 0;
            animation: textAppear 3s ease-in-out infinite;
        }

.line-1 {
            top: 20px;
            left: 20px;
            width: 0;
            animation-delay: 0.5s;
        }

.line-2 {
            top: 35px;
            left: 20px;
            width: 0;
            animation-delay: 1.5s;
        }

.line-3 {
            top: 50px;
            left: 20px;
            width: 0;
            animation-delay: 2.5s;
        }

@keyframes writing {
            0% { 
                transform: translateX(0) translateY(0) rotate(-25deg);
            }
            25% { 
                transform: translateX(10px) translateY(5px) rotate(-20deg);
            }
            50% { 
                transform: translateX(20px) translateY(8px) rotate(-25deg);
            }
            75% { 
                transform: translateX(30px) translateY(5px) rotate(-20deg);
            }
            100% { 
                transform: translateX(0) translateY(0) rotate(-25deg);
            }
        }

@keyframes textAppear {
            0% { 
                width: 0;
                opacity: 0;
            }
            30% { 
                opacity: 1;
            }
            60% { 
                width: 80px;
                opacity: 1;
            }
            100% { 
                width: 80px;
                opacity: 0.7;
            }
        }
    </style>
</head>
<body>
    <div class="writing-scene">
        <div class="quill">
            <div class="feather-shaft"></div>
            
            
            <div class="feather-barb barb-left barb-1"></div>
            <div class="feather-barb barb-left barb-2"></div>
            <div class="feather-barb barb-left barb-3"></div>
            <div class="feather-barb barb-left barb-4"></div>
            <div class="feather-barb barb-left barb-5"></div>
            
            
            <div class="feather-barb barb-right barb-1"></div>
            <div class="feather-barb barb-right barb-2"></div>
            <div class="feather-barb barb-right barb-3"></div>
            <div class="feather-barb barb-right barb-4"></div>
            <div class="feather-barb barb-right barb-5"></div>
            
            <div class="nib"></div>
        </div>
        
        <div class="paper">
            <div class="text-line line-1"></div>
            <div class="text-line line-2"></div>
            <div class="text-line line-3"></div>
        </div>
    </div>
</body>
</html>

Pluma de ave

Recomendado

Un código de gherhz

Un código de securearray494

Nave alienígena

HTML

CSS

JS

Recomendado

Un código de gherhz

Un código de securearray494

Nave alienígena

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS