css模拟了MacBook的外观-程序员茄子

代码 css模拟了MacBook的外观

2024-11-18 14:07:40 +0800 CST views 690

该文本是一个HTML文档，模拟了MacBook的外观。使用CSS样式定义了MacBook的屏幕、摄像头孔、底部和反光效果。屏幕中嵌入了一个iframe，用于加载外部内容。整体设计注重细节，如边框、阴影和反光效果，旨在提供真实的视觉体验。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MacBook 模拟</title>
    <style>
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: radial-gradient(circle at center, white, #C8C8C8);
        }

        .macbook {
            font-size: 20px;
            width: 900px; /* 将宽度设为900px */
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        .screen {
            height: 500px; /* 将高度设为500px */
            width: 800px;
            background: black;
            border: 0.3em solid #c0c0c0; /* 更接近真实的银色边框 */
            border-radius: 1em 1em 0 0;
            position: relative;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
        }

        /* 摄像头孔 */
        .camera {
            width: 8px;
            height: 8px;
            background-color: #333;
            border-radius: 50%;
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 2;
        }

        /* 在屏幕上添加 iframe 用于显示内容 */
        .screen iframe {
            border: none;
            margin: 4.2% 3.2%;
            width: calc(100% - 6.4%); /* 计算宽度，减去左右的 margin */
             height: calc(100% - 13.4%); /* 计算高度，减去上下的 margin */
        }

        /* 模拟屏幕反光效果 */
        .screen::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            /*background: radial-gradient(*/
            /*    circle at right bottom,*/
            /*    rgba(255, 255, 255, 0.4) 75%,*/
            /*    rgba(255, 255, 255, 0.6) 75%*/
            /*);*/
            margin: 4.2% 3.2%;
            pointer-events: none; /* 不影响 iframe 操作 */
        }

        /* 底部的 Base 部分 */
        .base {
            height: 0.7em;
            width: inherit;
            background: linear-gradient(
                white,
                white 55%,
                #999 60%,
                #222 90%,
                rgba(0, 0, 0, 0.1) 100%
            );
            border-radius: 0 0 10% 10% / 0 0 50% 50%;
            position: relative;
        }

        /* Base 部分的反光效果 */
        .base::before {
            content: '';
            position: absolute;
            width: inherit;
            height: 55%;
            background: linear-gradient(
                to right,
                rgba(0, 0, 0, 0.5) 0%,
                rgba(255, 255, 255, 0.8) 1%,
                rgba(0, 0, 0, 0.4) 4%,
                transparent 15%,
                rgba(255, 255, 255, 0.8) 50%,
                transparent calc(100% - 15%),
                rgba(0, 0, 0, 0.4) calc(100% - 4%),
                rgba(255, 255, 255, 0.8) calc(100% - 1%),
                rgba(0, 0, 0, 0.5) 100%
            );
        }

        /* Base 底部的阴影 */
        .base::after {
            content: '';
            position: absolute;
            width: 3em;
            height: 0.2em;
            background: #ddd;
            left: calc(50% - 3em / 2);
            box-shadow:
                inset -0.5em -0.1em 0.3em rgba(0, 0, 0, 0.2),
                inset 0.5em 0.1em 0.3em rgba(0, 0, 0, 0.2);
            border-radius: 0 0 7% 7% / 0 0 95% 95%;
        }
    </style>
</head>
<body>

    <div class="macbook">
        <div class="screen">
            <!-- 摄像头孔 -->
            <div class="camera"></div>
            <!-- 使用 iframe 加载内容 -->
            <iframe src="https://www.chenxutan.com"></iframe>
        </div>
        <div class="base"></div>
    </div>

</body>
</html>

images

复制全文生成海报网页设计前端开发用户界面 CSS样式

代码 css模拟了MacBook的外观

推荐文章