logo NodeSeekbeta

Gemini4 Argon画的秦始皇骑车

12
  • 还挺好看的

  • 还行 xhj010

  • 道理我懂,但是为什么反的

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>秦始皇骑车</title>
        <style>
            body {
                margin: 0;
                padding: 0;
                background-color: #f4e8c1;
                font-family: '楷体', 'KaiTi', serif;
                text-align: center;
                overflow-x: hidden;
            }
            .header {
                background-color: #8b0000;
                color: #ffd700;
                padding: 20px;
                box-shadow: 0 4px 6px rgba(0,0,0,0.3);
            }
            .story {
                margin: 40px auto;
                width: 80%;
                max-width: 800px;
                font-size: 1.5rem;
                color: #333;
                line-height: 1.8;
                border: 2px dashed #8b0000;
                padding: 20px;
                background-color: #fff;
                border-radius: 10px;
            }
            .road-container {
                position: relative;
                width: 100%;
                height: 250px;
                background-color: #808080;
                border-top: 5px solid #4d4d4d;
                border-bottom: 5px solid #4d4d4d;
                margin-top: 50px;
                overflow: hidden;
            }
            .wall {
                position: absolute;
                top: 0;
                width: 100%;
                height: 40px;
                background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><rect width="40" height="40" fill="%238b0000"/><rect x="0" y="0" width="18" height="18" fill="%23a52a2a"/><rect x="20" y="0" width="18" height="18" fill="%23a52a2a"/><rect x="10" y="20" width="18" height="18" fill="%23a52a2a"/></svg>') repeat-x;
            }
            .road-lines {
                position: absolute;
                top: 50%;
                width: 100%;
                height: 10px;
                background: repeating-linear-gradient(
                    90deg,
                    #fff,
                    #fff 40px,
                    transparent 40px,
                    transparent 80px
                );
                transform: translateY(-50%);
            }
            .emperor {
                position: absolute;
                bottom: 30px;
                left: -200px;
                font-size: 100px;
                animation: ride 12s linear infinite;
            }
            .emperor::after {
                content: '👑';
                position: absolute;
                top: -45px;
                left: 20px;
                font-size: 50px;
                transform: rotate(-10deg);
            }
            .label {
                position: absolute;
                top: -30px;
                left: -20px;
                font-size: 18px;
                font-weight: bold;
                background-color: #ffd700;
                color: #8b0000;
                padding: 5px 15px;
                border-radius: 8px;
                white-space: nowrap;
                box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
            }
            .label::after {
                content: '';
                position: absolute;
                bottom: -10px;
                left: 50px;
                border-width: 10px 10px 0;
                border-style: solid;
                border-color: #ffd700 transparent transparent transparent;
            }
            @keyframes ride {
                0% { left: -200px; transform: translateY(0); }
                25% { transform: translateY(-5px); }
                50% { transform: translateY(0); }
                75% { transform: translateY(-5px); }
                100% { left: 100%; transform: translateY(0); }
            }
        </style>
    </head>
    <body>
        <div class="header">
            <h1>大秦帝国:始皇微服私访记(单车版)</h1>
        </div>
        
        <div class="story">
            <p>公元前221年,秦始皇统一六国,书同文,车同轨。</p>
            <p>有一日,始皇觉得六驾马车太过颠簸,于是下令召集天下能工巧匠,发明了史上第一辆“大秦牌”两轮环保巡游车。</p>
            <p>今日风和日丽,始皇戴上皇冠,亲自蹬着自行车,沿万里长城兜风去也!</p>
        </div>
    
        <div class="road-container">
            <div class="wall"></div>
            <div class="road-lines"></div>
            <div class="emperor">
                <div class="label">朕去巡长城了!让一让!</div>
                🚴‍♂️
            </div>
        </div>
    </body>
    </html>
    
12

你好啊,陌生人!

我的朋友,看起来你是新来的,如果想参与到讨论中,点击下面的按钮!

📈用户数目📈

目前论坛共有73195位seeker

🎉欢迎新用户🎉