编辑代码

class Main {
	public static void main(String[] args) {
        //JSRUN引擎2.0,支持多达30种语言在线运行,全仿真在线交互输入输出。
		System.out.println("Hello world!   - java.jsrun.net ");
	}
}<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>梦幻卡通置物架设计</title>
    <style>
        :root {
            --main-color: #ff99cc;
            --accent-color: #a6e3ff;
            --metal-color: linear-gradient(45deg, #ffd700, #ff69b4);
        }

        body {
            background: linear-gradient(135deg, #f8f4ff, #ffe6f4);
            min-height: 100vh;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            padding: 20px;
        }

        /* 三视图容器 */
        .multi-view {
            display: flex;
            gap: 30px;
            margin-bottom: 40px;
        }

        /* 通用视图样式 */
        .view {
            background: rgba(255,255,255,0.9);
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }

        /* 3D效果容器 */
        .d3-container {
            perspective: 1000px;
            width: 300px;
            height: 300px;
        }

        .d3-shelf {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            animation: rotate 15s infinite linear;
        }

        /* 三视图样式 */
        #front-view { width: 300px; height: 400px; }
        #side-view { width: 150px; height: 400px; }
        #top-view { width: 300px; height: 150px; }

        /* 卡通层板样式 */
        .shelf {
            background: var(--main-color);
            border: 3px solid white;
            position: absolute;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            background-image: url('https://example.com/cartoon-pattern.png'); /* 替换为实际卡通图片URL */
            background-size: cover;
        }

        /* 3D面样式 */
        .face {
            position: absolute;
            border: 2px solid white;
            background: var(--accent-color);
            backface-visibility: visible;
        }

        /* 动态金属支撑 */
        .support {
            background: var(--metal-color);
            width: 15px;
            position: absolute;
            box-shadow: 0 0 10px rgba(255,105,180,0.5);
        }

        /* 尺寸标注 */
        .dimension {
            border-left: 2px dashed #ff69b4;
            position: absolute;
            color: #ff1493;
            font-weight: bold;
        }

        /* 3D旋转动画 */
        @keyframes rotate {
            0% { transform: rotateY(0deg) rotateX(-10deg); }
            100% { transform: rotateY(360deg) rotateX(-10deg); }
        }

        /* 美少女装饰 */
        .deco-girl {
            position: absolute;
            width: 80px;
            height: 120px;
            background: url('https://example.com/anime-girl.png'); /* 替换为实际图片URL */
            background-size: contain;
            z-index: 10;
            filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.3));
        }
    </style>
</head>
<body>
    <!-- 三视图 -->
    <div class="multi-view">
        <div class="view" id="front-view">
            <div class="shelf" style="top:50px; left:50px; width:200px; height:25px;"></div>
            <div class="support" style="left:50px; height:300px;"></div>
            <div class="support" style="right:50px; height:300px;"></div>
            <div class="deco-girl" style="right:10px; bottom:0;"></div>
        </div>

        <div class="view" id="side-view">
            <div class="shelf" style="top:50px; width:120px; height:25px;"></div>
            <div class="support" style="left:30px; height:250px;"></div>
        </div>

        <div class="view" id="top-view">
            <div class="shelf" style="left:50px; top:50px; width:200px; height:25px;"></div>
        </div>
    </div>

    <!-- 3D效果图 -->
    <div class="d3-container">
        <div class="d3-shelf">
            <div class="face" style="transform: translateZ(50px); width:200px; height:300px;"></div>
            <div class="face" style="transform: rotateY(90deg) translateZ(100px); width:200px; height:300px;"></div>
            <div class="face" style="transform: rotateX(90deg) translateZ(150px); width:200px; height:200px;"></div>
            <div class="deco-girl" style="transform: translateZ(80px);"></div>
        </div>
    </div>
</body>
</html>