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

效果演示

创建了一个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.mzph.cn/web/57441.shtml

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

相关文章

大型商场应急响应系统开发:SpringBoot篇

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…

记录一次查询优化

一.背景描述 1.1问题和情况 生产环境&#xff0c;有一张按每天一份数据的表&#xff08;下面简称表1&#xff09;&#xff0c;跨天查询较慢&#xff0c;跨月查询甚至超时查询一天内的数据速度不怎么慢查询是分页的表1按照日期做了子分区&#xff0c;一个月一个子分区 1.2造成…

头歌C语言数据结构课程实验(栈的应用)

第1关&#xff1a;利用栈实现整数的十进制转八进制 本关必读 栈是基础的数据结构&#xff0c;元素操作遵循后进先出的原理。本关卡基于数组存储实现了栈的基本操作。 该方案将栈存储在一片连续空间里&#xff0c;并通过data、top和max三个属性元素。组织成为一个结构&#xf…

Java | Leetcode Java题解之第521题最长特殊序列I

题目&#xff1a; 题解&#xff1a; class Solution {public int findLUSlength(String a, String b) {return !a.equals(b) ? Math.max(a.length(), b.length()) : -1;} }

《使用Gin框架构建分布式应用》阅读笔记:p212-p233

《用Gin框架构建分布式应用》学习第12天&#xff0c;p212-p233总结&#xff0c;总22页。 一、技术总结 1.JavaScript知识点 (1)class、method (2)function, arrow function, (3)fetch() (4)Promise, then() 2.bootstrap 第5章主要涉及前端技术的运用&#xff0c;作为后…

NVR录像机汇聚管理EasyNVR多个NVR同时管理融合汇聚管理系统

流媒体视频融合与汇聚管理系统能够实现对各类模块化服务的统一管理和配置&#xff0c;整合、管理和共享应用服务&#xff0c;并通过标准接口为业务平台和其他第三方平台提供便捷的数据调用功能。为确保该系统的成功实施和稳定运行&#xff0c;在建设方案中除了考虑基础的架构设…

服务器的免密登录和文件传输

在天文学研究中&#xff0c;通常会采用ssh登录服务器&#xff0c;把复杂的计算交给服务器&#xff0c;但是如果你没有进行额外的配置&#xff0c;那么登录服务器&#xff0c;以及和服务器进行文件传输&#xff0c;每次都要输入账号和密码&#xff0c;比较不方便&#xff0c;Win…

【Nas】X-Doc:jellyfin“该客户端与媒体不兼容,服务器未发送兼容的媒体格式”问题解决方案

【Nas】X-Doc&#xff1a;jellyfin“该客户端与媒体不兼容&#xff0c;服务器未发送兼容的媒体格式”问题解决方案 当使用Jellyfin播放视频时出现“该客户端与媒体不兼容&#xff0c;服务器未发送兼容的媒体格式”&#xff0c;这是与硬件解码和ffmpeg设置有关系&#xff0c;具体…

沪深A股上市公司数据报告分析

数据分析报 目录 数据分析报告 1.引言 1.1 背景介绍 1.2 报告目的 1.3 报告范围 1.4 关键术语定义 2. 数据收集与预处理 2.1 数据来源概述 2.2 数据收集过程 2.3 数据预处理步骤 3. 数据可视化 3.1分析地区对公司数量的影响 3.2分析行业分类是否影响公…

Mysql当中的各种log

一、MySQL日志文件类型 重做日志&#xff08;redo log&#xff09;回滚日志&#xff08;undo log&#xff09;二进制日志&#xff08;binlog&#xff09;错误日志&#xff08;errorlog&#xff09;慢查询日志&#xff08;slow query log&#xff09;一般查询日志&#xff08;g…

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-29

计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-29 目录 文章目录 计算机前沿技术-人工智能算法-大语言模型-最新研究进展-2024-10-29目录1. Does your LLM truly unlearn? An embarrassingly simple approach to recover unlearned knowledge摘要研究背景问题…

C1.【C++ Cont】准备

目录 1.平台 2.Dev C的使用方法 1.新建项目 2.几个常用按钮 3.修改字体 3.第一个C程序:打印Hello World! 4.注 1.平台 Dev C,VS2022 2.Dev C的使用方法 1.新建项目 选择Console Application控制台应用程序,C项目 项目的后缀dev 默认下创建了一个main.cpp,cpp为c源程…

uniapp编译多端项目App、小程序,input框键盘输入后

项目场景&#xff1a; uniapp编译后的小程序端&#xff0c;app端 在一个输入框 输入消息后&#xff0c;点击键盘上的操作按钮之后键盘不被收起&#xff0c;点击其他发送按钮时&#xff0c;键盘也不被收起。 问题描述 在编译后的app上普通的事件绑定&#xff0c;tap,click在发…

pip命令行安装pytest 一直报错

其实就是切换不同镜像安装 我最终成功的是阿里云镜像 pip install --trusted-host mirrors.aliyun.com pytest 也可以用其他的 pip install -i https://pypi.org/simple pytest # 或者使用其他的镜像源 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple pytest

【339】基于springboot的新能源充电系统

毕 业 设 计&#xff08;论 文&#xff09; 题目&#xff1a;新能源充电系统的设计与实现 摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解…

为什么 C 语言数组是从 0 开始计数的?

C 语言等大多数编程语言的数组从 0 开始而不从 1 开始&#xff0c;有两个原因&#xff1a; 第一&#xff1a;地址计算更方便 C 语言从 0 开始的话&#xff0c;array[i] 的地址就正好是&#xff1a; (array i) 如果是从 1 开始的话&#xff0c;就是 (array i - 1) 多一次计…

`map` 是 JavaScript 数组的一个高阶函数,用于对数组中的每个元素进行操作,并返回一个新的数组

文章目录 map 方法的作用语法示例 具体到你的代码完整代码片段总结 当然可以解释一下 map 方法的作用。 map 方法的作用 map 是 JavaScript 数组的一个高阶函数&#xff0c;用于对数组中的每个元素进行操作&#xff0c;并返回一个新的数组。新数组的每个元素是原数组中对应元…

代码随想录day15 二叉树(3)

文章目录 day11 栈与队列(2)栈与队列的总结 day13 二叉树&#xff08;1&#xff09;day14 二叉树&#xff08;2&#xff09;day15 二叉树&#xff08;3&#xff09; day11 栈与队列(2) 逆波兰表达式求值 https://leetcode.cn/problems/evaluate-reverse-polish-notation/ 逆…

计算机毕业设计Python+大模型股票预测系统 股票推荐系统 股票可视化 股票数据分析 量化交易系统 股票爬虫 股票K线图 大数据毕业设计 AI

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; Python大模型股票预测系统 …

[山河CTF 2024] week3

一周不在家&#xff0c;这是补的最后一篇。后边的还有0xgame和shctf的末周。打不动了。 Crypto Approximate_n 题目分两部分&#xff0c;flag分两块两个RSA&#xff0c;第1个泄露了4个n_approxkpr的值&#xff0c;后边只泄露了1个。 第1部分利用以前的模板&#xff0c;造格…