HTMLCSS:3D旋转动画机器人摄像头

news2024/11/7 15:36:36

效果演示

创建了一个3D机器人摄像头效果。

HTML

<div class="modelViewPort">
    <div class="eva">
        <div class="head">
            <div class="eyeChamber">
                <div class="eye"></div>
                <div class="eye"></div>
            </div>
        </div>
        <div class="body">
            <div class="hand"></div>
            <div class="hand"></div>
            <div class="scannerThing"></div>
            <div class="scannerOrigin"></div>
        </div>
    </div>
</div>
  • modelViewPort类包含.eva类的div元素,它代表模型本身。
  • .eva类又包含了.head和.body两个部分,分别代表模型的头部和身体。
  • 头部包含两个.eye元素,代表眼睛。
  • 身体包含两个.hand元素代表手,一个.scannerThing代表扫描器的光束,以及一个.scannerOrigin代表扫描器的起点。

CSS

.modelViewPort {
    perspective: 1000px;
    width: 20rem;
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    overflow: hidden;
}

.eva {
    --EVA-ROTATION-DURATION: 4s;
    transform-style: preserve-3d;
    animation: rotateRight var(--EVA-ROTATION-DURATION) linear infinite alternate;
}

.head {
    position: relative;
    width: 6rem;
    height: 4rem;
    border-radius: 48% 53% 45% 55% / 79% 79% 20% 22%;
    background: linear-gradient(to right, white 45%, gray);
}

.eyeChamber {
    width: 4.5rem;
    height: 2.75rem;
    position: relative;
    left: 50%;
    top: 55%;
    border-radius: 45% 53% 45% 48% / 62% 59% 35% 34%;
    background-color: #0c203c;
    box-shadow: 0px 0px 2px 2px white, inset 0px 0px 0px 2px black;
    transform: translate(-50%, -50%);
    animation: moveRight var(--EVA-ROTATION-DURATION) linear infinite alternate;
}

.eye {
    width: 1.2rem;
    height: 1.5rem;
    position: absolute;
    border-radius: 50%;
}

.eye:first-child {
    left: 12px;
    top: 50%;
    background: repeating-linear-gradient(65deg,
            #9bdaeb 0px,
            #9bdaeb 1px,
            white 2px);
    box-shadow: inset 0px 0px 5px #04b8d5, 0px 0px 15px 1px #0bdaeb;
    transform: translate(0, -50%) rotate(-65deg);
}

.eye:nth-child(2) {
    right: 12px;
    top: 50%;
    background: repeating-linear-gradient(-65deg,
            #9bdaeb 0px,
            #9bdaeb 1px,
            white 2px);
    box-shadow: inset 0px 0px 5px #04b8d5, 0px 0px 15px 1px #0bdaeb;
    transform: translate(0, -50%) rotate(65deg);
}

.body {
    width: 6rem;
    height: 8rem;
    position: relative;
    margin-block-start: 0.25rem;
    border-radius: 47% 53% 45% 55% / 12% 9% 90% 88%;
    background: linear-gradient(to right, white 35%, gray);
}

.hand {
    position: absolute;
    left: -1.5rem;
    top: 0.75rem;
    width: 2rem;
    height: 5.5rem;
    border-radius: 40%;
    background: linear-gradient(to left, white 15%, gray);
    box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.25);
    transform: rotateY(55deg) rotateZ(10deg);
}

.hand:first-child {
    animation: compensateRotation var(--EVA-ROTATION-DURATION) linear infinite alternate;
}

.hand:nth-child(2) {
    left: 92%;
    background: linear-gradient(to right, white 15%, gray);
    transform: rotateY(55deg) rotateZ(-10deg);
    animation: compensateRotationRight var(--EVA-ROTATION-DURATION) linear infinite alternate;
}

.scannerThing {
    width: 0;
    height: 0;
    position: absolute;
    left: 60%;
    top: 10%;
    border-top: 180px solid #9bdaeb;
    border-left: 250px solid transparent;
    border-right: 250px solid transparent;
    transform-origin: top left;
    mask: linear-gradient(to right, white, transparent 35%);
    animation: glow 2s cubic-bezier(0.86, 0, 0.07, 1) infinite;
}

.scannerOrigin {
    position: absolute;
    width: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    left: 60%;
    top: 10%;
    background: #9bdaeb;
    box-shadow: inset 0px 0px 5px rgba(0, 0, 0, 0.5);
    animation: moveRight var(--EVA-ROTATION-DURATION) linear infinite;
}

@keyframes rotateRight {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(25deg);
    }
}

@keyframes moveRight {
    from {
        transform: translate(-50%, -50%);
    }

    to {
        transform: translate(-40%, -50%);
    }
}

@keyframes compensateRotation {
    from {
        transform: rotateY(55deg) rotateZ(10deg);
    }

    to {
        transform: rotatey(30deg) rotateZ(10deg);
    }
}

@keyframes compensateRotationRight {
    from {
        transform: rotateY(55deg) rotateZ(-10deg);
    }

    to {
        transform: rotateY(70deg) rotateZ(-10deg);
    }
}

@keyframes glow {
    from {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    45% {
        transform: rotate(-25deg);
    }

    75% {
        transform: rotate(5deg);
    }

    100% {
        opacity: 0;
    }
}
  • modelViewPort类为模型提供了一个视口,设置了透视效果、尺寸、宽高比、边框半径、显示方式、背景颜色和溢出隐藏。
  • .eva类定义了模型的3D变换样式,包括一个自定义属性–EVA-ROTATION-DURATION用于定义动画持续时间,以及一个无限循环的rotateRight动画。
  • .head类定义了头部的位置、尺寸和背景渐变。
  • .eyeChamber类定义了眼睛腔室的位置、尺寸、背景颜色和阴影,以及一个moveRight动画。
  • .eye类定义了眼睛的基本样式。
  • .body类定义了身体的位置、尺寸和背景渐变。
  • .hand类定义了手的位置、尺寸和背景渐变,以及两个手的不同动画。
  • .scannerThing和.scannerOrigin类定义了扫描器的样式和动画。
  • @keyframes定义了所有的动画效果,包括rotateRight、moveRight、compensateRotation、compensateRotationRight和glow。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2228830.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ZeroNL2SQL:零样本 NL2SQL

发布于&#xff1a;2024 年 10 月 30 日 星期三 #RAG #NL2SQL # Zero-Shot 自然语言到 SQL&#xff08;NL2SQL&#xff09;的转换是一个重要的研究领域&#xff0c;它允许非技术用户轻松访问和分析数据&#xff0c;在商业智能、数据分析等领域具有广泛的应用前景。然而&#x…

Qgis 开发初级 《ToolBox》

Qgis 有个ToolBox 的&#xff0c;在Processing->ToolBox 菜单里面&#xff0c;界面如下。 理论上Qgis这里面的工具都是可以用脚本或者C 代码调用的。界面以Vector overlay 为例子简单介绍下使用方式。Vector overlay 的意思是矢量叠置分析&#xff0c;和arcgis软件类似的。点…

三合一无线键鼠中射频芯片-PHY6233

PHY6233 三合一键鼠芯片在键鼠领域占据着重要的地位。它以其强大的性能和广泛的适用性&#xff0c;成为众多键鼠产品的核心组件。PHY6233 芯片能够提供出色的操作体验。它可以支持多达几乎 100 个按键的支持&#xff0c;满足了用户对多功能键鼠的需求。同时&#xff0c;该芯片还…

基于STM32F103的计秒设计

基于STM32F103的计秒设计 仿真软件&#xff1a; Proteus 8.17 编程软件&#xff1a; Keil 5 仿真实现&#xff1a; 在4位数码管上进行计秒显示&#xff0c;每100ms改变一次数值。 数码管原理&#xff1a; 数码管是一种常用的显示器件&#xff0c;主要用于显示数字和一些字母…

万圣夜,Codigger

在这个神秘的万圣节&#xff0c;让Codigger&#xff0c;一个专业的分布式操作系统&#xff0c;带领你踏入未知的编程世界&#xff01;就像变装成各种角色一样&#xff0c;Codigger也以其独特的能力和技巧&#xff0c;在数字世界中展现无穷魅力。让我们一起在这个神秘的节日里&a…

探索光耦:光耦——光伏逆变器中的智慧守护者

在全球清洁能源的浪潮中&#xff0c;光伏产业正以前所未有的速度蓬勃发展。作为光伏发电系统的核心设备&#xff0c;光伏逆变器扮演着将直流电转化为交流电的关键角色&#xff0c;其性能直接关系到整个系统的效率和安全性。而在这一复杂而精细的转换过程中&#xff0c;光电耦合…

关于AES加密的思考与总结 | 内容详细

今天心血来潮&#xff0c;想把AES加密的内容做一个总结&#xff0c;方便日后观看查阅。 学艺不精&#xff0c;如有错误&#xff0c;欢迎各位老师批评指正&#xff01; AES简介 AES是目前广泛应用的对称加密算法&#xff0c;主要用于保护电子数据。 对称加密&#xff1a;加密…

航顺芯片HK32MCU版图再扩张,深圳南山新基地助力集成电路核心圈突破

【中国&#xff0c;深圳&#xff0c;2024年10月24日】深圳市南山区&#xff0c;作为中国高新技术产业的重要聚集地&#xff0c;一直是集成电路企业的必争之地。近期&#xff0c;深圳市航顺芯片技术研发有限公司&#xff08;下文简称“航顺芯片”&#xff09;随着高精尖人才团队…

qt配置https请求

qt应用版本 windows 32位 先说下心理路程&#xff0c;你能遇到的我都遇到了&#xff0c;你能想到的我都想到了&#xff0c;怎么解决看这一篇就够了&#xff0c;从上午12点到晚上12点几乎没离开电脑&#xff08;除了吃饭&#xff09;&#xff0c;对于openssl这种用的时候无感&am…

LVGL-从入门到熟练使用

LVGL简介 LVGL&#xff08; Light and Versatile Graphics Library &#xff09;是一个轻量、多功能的开源图形库。 1、丰富且强大的模块化图形组件&#xff1a;按钮 、图表 、列表、滑动条、图片等 2、高级的图形引擎&#xff1a;动画、抗锯齿、透明度、平滑滚动、图层混合等…

【判断推理】翻译推理

7.1 等价推出 等价推出指的是将题干逻辑关系和选项逻辑关系分别翻译后&#xff0c;二者完全一致。考察的是对翻译规则的掌握&#xff0c;常用知识点有命题的传递和原命题、逆否命题等价。 题干中无逻辑关联词的部分不需要关注&#xff0c;直接寻找带有逻辑关联词的语句即可。 …

圣麟易安中医:微搭助力中医诊所实现数字化问诊接诊

“只用了下班时间&#xff0c;每天写一点点&#xff0c;2个月就基于微搭搭建出来了现在问诊小程序和接诊管理后台&#xff0c;大概节约70%的工作量吧” ——项目负责人 邓小静 私人中医诊所也能定制小程序&#xff0c;传统中医诊所如何实现服务流程的智能化和个性化&#x…

基于SSM校园生活电子商城管理系统的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;餐厅信息管理&#xff0c;菜品类型管理&#xff0c;闲置物品管理&#xff0c;订单管理&#xff0c;系统管理 用户账号功能包括&#xff1a;系统首页&#xff0c;个人中心&#xf…

python mac vscode 脚本文件的运行

切换到脚本文件的目录下 路径的修改 当前文件组织形式&#xff1a; 脚本文件在文件夹下&#xff1a; 赋予权限&#xff1a;chmod x ./scripts/fscd_test.sh 运行&#xff1a;./scripts/fscd_test.sh

Python画图3个小案例之“一起看流星雨”、“爱心跳动”、“烟花绚丽”

源码如下&#xff1a; import turtle # 导入turtle库&#xff0c;用于图形绘制 import random # 导入random库&#xff0c;生成随机数 import math # 导入math库&#xff0c;进行数学计算turtle.setup(1.0, 1.0) # 设置窗口大小为屏幕大小 turtle.title("流星雨动画&…

【大数据学习 | kafka】kafka的整体框架与数据结构

1. kafka的整体框架 首先kafka启动以后所有的broker都会向zookeeper进行注册&#xff0c;在/brokers/ids中以列表的形式展示所有的节点&#xff0c;在/controller节点中使用独享锁实现broker的选举&#xff0c;其中一个机器为主节点。其他的为从节点&#xff0c;选举的根本原则…

SpringBoot获取resources目录下的文件

在 Spring Boot 项目中&#xff0c;获取 resources 目录中的文件路径通常涉及到访问类路径资源&#xff08;classpath resources&#xff09;。Spring Boot 提供了一些工具类和方法&#xff0c;可以方便地访问这些资源。以下是一些常见的方法&#xff1a; 首先&#xff0c;我们…

Mybatis-plus-扩展功能

Mybatis-plus-扩展功能 一&#xff1a;代码生成器 AutoGenerator 是 MyBatis-Plus 的代码生成器&#xff0c;通过 AutoGenerator 可以快速生成 Entity、Mapper、Mapper XML、Service、Controller 等各个模块的代码&#xff0c;极大的提升了开发效率。 功能的演示&#xff1a…

数据可视化工具深入学习:Seaborn 与 Plotly 的详细教程

数据可视化工具深入学习&#xff1a;Seaborn 与 Plotly 的详细教程 数据可视化是数据分析中不可或缺的一部分&#xff0c;能够有效地帮助我们理解数据、发现模式和传达信息。在众多可视化工具中&#xff0c;Seaborn 和 Plotly 是两个非常流行且强大的库。本文将深入探讨这两个…

DAY14|二叉树Part02|LeetCode: 226.翻转二叉树、101. 对称二叉树、104.二叉树的最大深度、111.二叉树的最小深度

目录 LeetCode: 226.翻转二叉树 基本思路 C代码 LeetCode: 101. 对称二叉树 基本思路 C代码 LeetCode: 104.二叉树的最大深度 基本思路 C代码 LeetCode: 111.二叉树的最小深度 基本思路 C代码 LeetCode: 226.翻转二叉树 力扣题目链接 文字讲解&#xff1a;LeetCode…