Pluma de ave

1,158 byby.createsite

Abrir en el editor Publica tu código

Recomendado

20 February 2026

Plantilla HTML de contador de clics del mouse

21 July 2025

Menú de navegación con botones de opción CSS

2 February 2026

n-gon: Juego de desplazamiento lateral de física Matter.js

HTML

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

CSS