HTML&CSS：MacBook Air 3D 动画跃然屏上

🕗 发布于 2024-11-26 06:43 html css 3d javascript 前端

效果演示

这段代码是一个HTML文档，它包含了内联的CSS样式，通过CSS3的3D转换和动画功能，创建了一个模拟的MacBook Air笔记本电脑的3D动画效果，包括屏幕的开合、键盘的按压效果以及阴影的变化
在这里插入图片描述

HTML

 <div class="macbook">
        <div class="inner">
            <div class="screen">
                <div class="face-one">
                    <div class="camera"></div>
                    <div class="display">
                        <div class="shade"></div>
                    </div>
                    <span>MacBook Air</span>
                </div>
                <title>Layer 1</title>
            </div>
            <div class="macbody">
                <div class="face-one">
                    <div class="touchpad">
                    </div>
                    <div class="keyboard">
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key space"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key"></div>
                        <div class="key f"></div>
                        <div class="key f"></div>
                        <div class="key f"></div>
                        <div class="key f"></div>
                        <div class="key f"></div>
                        <div class="key f"></div>
                        <div class="key f"></div>
                        <div class="key f"></div>
                        <div class="key f"></div>
                        <div class="key f"></div>
                        <div class="key f"></div>
                        <div class="key f"></div>
                        <div class="key f"></div>
                        <div class="key f"></div>
                        <div class="key f"></div>
                        <div class="key f"></div>
                    </div>
                </div>
                <div class="pad one"></div>
                <div class="pad two"></div>
                <div class="pad three"></div>
                <div class="pad four"></div>
            </div>
        </div>
        <div class="shadow"></div>
    </div>

macbook：是一个容器元素，用于创建MacBook的3D模型。
shadow：是一个用于创建MacBook阴影的元素。

CSS

.macbook {
            width: 150px;
            height: 96px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -85px 0 0 -78px;
            perspective: 500px;
        }

        .shadow {
            position: absolute;
            width: 60px;
            height: 0px;
            left: 40px;
            top: 160px;
            transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
            box-shadow: 0 0 60px 40px rgba(0, 0, 0, 0.3);
            animation: shadow infinite 7s ease;
        }

        .inner {
            z-index: 20;
            position: absolute;
            width: 150px;
            height: 96px;
            left: 0;
            top: 0;
            transform-style: preserve-3d;
            transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
            animation: rotate infinite 7s ease;
        }

        .screen {
            width: 150px;
            height: 96px;
            position: absolute;
            left: 0;
            bottom: 0;
            border-radius: 7px;
            background: #ddd;
            transform-style: preserve-3d;
            transform-origin: 50% 93px;
            transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
            animation: lid-screen infinite 7s ease;
            background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0) 100%);
            background-position: left bottom;
            background-size: 300px 300px;
            box-shadow: inset 0 3px 7px rgba(255, 255, 255, 0.5);
        }

        .screen .logo {
            position: absolute;
            width: 20px;
            height: 24px;
            left: 50%;
            top: 50%;
            margin: -12px 0 0 -10px;
            transform: rotateY(180deg) translateZ(0.1px);
        }

        .screen .face-one {
            width: 150px;
            height: 96px;
            position: absolute;
            left: 0;
            bottom: 0;
            border-radius: 7px;
            background: #d3d3d3;
            transform: translateZ(2px);
            background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0) 100%);
        }

        .screen .face-one .camera {
            width: 3px;
            height: 3px;
            border-radius: 100%;
            background: #000;
            position: absolute;
            left: 50%;
            top: 4px;
            margin-left: -1.5px;
        }

        .screen .face-one .display {
            width: 130px;
            height: 74px;
            margin: 10px;
            background-color: #000;
            background-size: 100% 100%;
            border-radius: 1px;
            position: relative;
            box-shadow: inset 0 0 2px rgba(0, 0, 0, 1);
        }

        .screen .face-one .display .shade {
            position: absolute;
            left: 0;
            top: 0;
            width: 130px;
            height: 74px;
            background: linear-gradient(-135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 47%, rgba(255, 255, 255, 0) 48%);
            animation: screen-shade infinite 7s ease;
            background-size: 300px 200px;
            background-position: 0px 0px;
        }

        .screen .face-one span {
            position: absolute;
            top: 85px;
            left: 57px;
            font-size: 6px;
            color: #666
        }

        .macbody {
            width: 150px;
            height: 96px;
            position: absolute;
            left: 0;
            bottom: 0;
            border-radius: 7px;
            background: #cbcbcb;
            transform-style: preserve-3d;
            transform-origin: 50% bottom;
            transform: rotateX(-90deg);
            animation: lid-macbody infinite 7s ease;
            background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0) 100%);
        }

        .macbody .face-one {
            width: 150px;
            height: 96px;
            position: absolute;
            left: 0;
            bottom: 0;
            border-radius: 7px;
            transform-style: preserve-3d;
            background: #dfdfdf;
            animation: lid-keyboard-area infinite 7s ease;
            transform: translateZ(-2px);
            background-image: linear-gradient(30deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0) 100%);
        }

        .macbody .touchpad {
            width: 40px;
            height: 31px;
            position: absolute;
            left: 50%;
            top: 50%;
            border-radius: 4px;
            margin: -44px 0 0 -18px;
            background: #cdcdcd;
            background-image: linear-gradient(30deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0) 100%);
            box-shadow: inset 0 0 3px #888;
        }

        .macbody .keyboard {
            width: 130px;
            height: 45px;
            position: absolute;
            left: 7px;
            top: 41px;
            border-radius: 4px;
            transform-style: preserve-3d;
            background: #cdcdcd;
            background-image: linear-gradient(30deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0) 100%);
            box-shadow: inset 0 0 3px #777;
            padding: 0 0 0 2px;
        }

        .keyboard .key {
            width: 6px;
            height: 6px;
            background: #444;
            float: left;
            margin: 1px;
            transform: translateZ(-2px);
            border-radius: 2px;
            box-shadow: 0 -2px 0 #222;
            animation: keys infinite 7s ease;
        }

        .key.space {
            width: 45px;
        }

        .key.f {
            height: 3px;
        }

        .macbody .pad {
            width: 5px;
            height: 5px;
            background: #333;
            border-radius: 100%;
            position: absolute;
        }

        .pad.one {
            left: 20px;
            top: 20px;
        }

        .pad.two {
            right: 20px;
            top: 20px;
        }

        .pad.three {
            right: 20px;
            bottom: 20px;
        }

        .pad.four {
            left: 20px;
            bottom: 20px;
        }

        @keyframes rotate {
            0% {
                transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
            }

            5% {
                transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);
            }

            20% {
                transform: rotateX(30deg) rotateY(200deg) rotateZ(0deg);
            }

            25% {
                transform: rotateX(-60deg) rotateY(150deg) rotateZ(0deg);
            }

            60% {
                transform: rotateX(-20deg) rotateY(130deg) rotateZ(0deg);
            }

            65% {
                transform: rotateX(-20deg) rotateY(120deg) rotateZ(0deg);
            }

            80% {
                transform: rotateX(-20deg) rotateY(375deg) rotateZ(0deg);
            }

            85% {
                transform: rotateX(-20deg) rotateY(357deg) rotateZ(0deg);
            }

            87% {
                transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);
            }

            100% {
                transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);
            }
        }

        @keyframes lid-screen {
            0% {
                transform: rotateX(0deg);
                background-position: left bottom;
            }

            5% {
                transform: rotateX(50deg);
                background-position: left bottom;
            }

            20% {
                transform: rotateX(-90deg);
                background-position: -150px top;
            }

            25% {
                transform: rotateX(15deg);
                background-position: left bottom;
            }

            30% {
                transform: rotateX(-5deg);
                background-position: right top;
            }

            38% {
                transform: rotateX(5deg);
                background-position: right top;
            }

            48% {
                transform: rotateX(0deg);
                background-position: right top;
            }

            90% {
                transform: rotateX(0deg);
                background-position: right top;
            }

            100% {
                transform: rotateX(0deg);
                background-position: right center;
            }
        }

        @keyframes lid-macbody {
            0% {
                transform: rotateX(-90deg);
            }

            50% {
                transform: rotateX(-90deg);
            }

            100% {
                transform: rotateX(-90deg);
            }
        }

        @keyframes lid-keyboard-area {
            0% {
                background-color: #dfdfdf;
            }

            50% {
                background-color: #bbb;
            }

            100% {
                background-color: #dfdfdf;
            }
        }

        @keyframes screen-shade {
            0% {
                background-position: -20px 0px;
            }

            5% {
                background-position: -40px 0px;
            }

            20% {
                background-position: 200px 0;
            }

            50% {
                background-position: -200px 0;
            }

            80% {
                background-position: 0px 0px;
            }

            85% {
                background-position: -30px 0;
            }

            90% {
                background-position: -20px 0;
            }

            100% {
                background-position: -20px 0px;
            }
        }

        @keyframes keys {
            0% {
                box-shadow: 0 -2px 0 #222;
            }

            5% {
                box-shadow: 1 -1px 0 #222;
            }

            20% {
                box-shadow: -1px 1px 0 #222;
            }

            25% {
                box-shadow: -1px 1px 0 #222;
            }

            60% {
                box-shadow: -1px 1px 0 #222;
            }

            80% {
                box-shadow: 0 -2px 0 #222;
            }

            85% {
                box-shadow: 0 -2px 0 #222;
            }

            87% {
                box-shadow: 0 -2px 0 #222;
            }

            100% {
                box-shadow: 0 -2px 0 #222;
            }
        }

        @keyframes shadow {
            0% {
                transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
                box-shadow: 0 0 60px 40px rgba(0, 0, 0, 0.3);
            }

            5% {
                transform: rotateX(80deg) rotateY(10deg) rotateZ(0deg);
                box-shadow: 0 0 60px 40px rgba(0, 0, 0, 0.3);
            }

            20% {
                transform: rotateX(30deg) rotateY(-20deg) rotateZ(-20deg);
                box-shadow: 0 0 50px 30px rgba(0, 0, 0, 0.3);
            }

            25% {
                transform: rotateX(80deg) rotateY(-20deg) rotateZ(50deg);
                box-shadow: 0 0 35px 15px rgba(0, 0, 0, 0.1);
            }

            60% {
                transform: rotateX(80deg) rotateY(0deg) rotateZ(-50deg) translateX(30px);
                box-shadow: 0 0 60px 40px rgba(0, 0, 0, 0.3);
            }

            100% {
                box-shadow: 0 0 60px 40px rgba(0, 0, 0, 0.3);
            }
        }

.macbook 选择器定义了MacBook容器的大小和位置，并设置了3D空间的透视效果。
.shadow 选择器创建了MacBook的阴影效果，并应用了一个无限循环的动画。
.inner 选择器定义了MacBook内部元素的3D效果，并应用了一个无限循环的动画。
.screen 选择器定义了MacBook屏幕的外观，包括背景渐变和阴影效果，并应用了一个无限循环的动画。
@keyframes 规则定义了多个动画效果，包括MacBook的旋转、屏幕的开合效果、键盘区域的颜色变化、屏幕遮罩的移动以及键盘按键的动画效果。

原文地址：https://blog.csdn.net/weixin_52814911/article/details/144026018

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：RabbitMQ
下一篇：Linux关于vim的笔记

掌握 Vue key：剖析其原理及与无 key 的区别
keykey的作用：确保 Vue 高效更新列表，避免不必要的 DOM 操作，提高性能。设置key和不设置key的区别：有key时，Vue 可以准确地追踪每个元素的身份，避免错误的元素复用；没有key时
阅读更多2024-11-26
MySQL底层概述—2.InnoDB磁盘结构
当日志文件达到该阈值后，且参数innodb_undo_log_truncate=ON时，才会触发truncate回收动作，被truncate后的表空间文件大小，会缩小到undo log表空间数据文件默
阅读更多2024-11-26
JS的DOM操作和事件监听综合练习（具备三种功能的轮播图案例）
第4张</p><p class="button" id="p4">第4张</p><p class="but
阅读更多2024-11-26
vue3 ts项目 | 使用TDesign的日期选择组件
除此之外，也可以使用和来实现自动导入：您仍需在项目引入组件库的少量全局样式变量并安装两个unplugin相关的第三方包然后在 Vite 对应的配置文件添加上述插件。
阅读更多2024-11-26
rpm方式安装postgres数据库及普通用户管理数据库
postgres安装及普通用户管理
阅读更多2024-11-26
MySQL数据库与Informix：能否创建同名表？
在MySQL和Informix数据库中，创建同名表的需求可以通过不同的方式实现。MySQL不允许在同一个数据库下创建两个名称完全相同的表，但可以通过视图、别名或在不同数据库中创建表等方式来实现类似的效
阅读更多2024-11-26
Ansible--自动化运维工具
Ansible是一款自动化运维工具，基于Python开发，集合了众多运维工具（puppet、cfengine、chef、func、fabric）的优点，实现了批量系统配置、批量程序部署、批量运行命令等
阅读更多2024-11-26
【Electron学习笔记（二）】基于Electron开发应用程序
本文旨在帮助初学者快速上手Electron，通过一步步的示例操作，展示如何从头开始创建一个简单的本地应用程序。我们将从项目的基本结构搭建开始，包括创建HTML、CSS和JavaScript文件，到配置
阅读更多2024-11-26
Ansible Playbook剧本用法
Ansible Playbook剧本用法
阅读更多2024-11-26
自动化立体仓库堆垛机货叉故障处理
这个之前也有遇到过，所以我就明白了，应该就是前面的维修没搞定变频器的故障问题，所以就把它短接了，短接以后就不报警了，他就可以说修好了，顺利拿钱，而实际上这个变频器是一直有问题的，只是给短接没报故障，所
阅读更多2024-11-26

HTML&CSS：MacBook Air 3D 动画跃然屏上

效果演示

HTML

CSS

相关文章