道理我懂,但是为什么反的 <!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>
还挺好看的
https://share.gemini.google/3PDQwQp7zT4K 好厉害
还行
道理我懂,但是为什么反的