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,一经查实,立即删除!

相关文章

用 css 实现空列表自动提示 “空状态”

css实现 /* 空列表状态通用css */ .list-auto-empty:empty::after {content: attr(empty);color: gray;margin: 50px auto 0;background-image: url(empty_data.png);background-size: 100%;background-repeat: no-repeat;width: 224px;height: 140px;padding-top: 140px;text…

计算机科学与技术-毕业设计选题推荐

基于特定技术的系统设计与实现 基于深度学习的图像识别系统设计与实现基于区块链的数据安全保护技术研究与实现基于云计算的大数据处理平台设计与开发基于物联网的智能家居系统设计与实现基于机器学习的推荐算法研究与实现 面向实际应用的需求分析与开发 智慧医疗信息系统设…

如何在Linux系统中使用Git进行版本控制

如何在Linux系统中使用Git进行版本控制 Git简介 安装Git 在Debian/Ubuntu系统中安装 在CentOS/RHEL系统中安装 初始化Git仓库 配置全局用户信息 基本的Git命令 添加文件到暂存区 查看状态 提交更改 查看提交历史 工作流 分支管理 切换分支 合并分支 远程仓库 添加远程仓库 推…

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

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

记录一次查询优化

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

【网络安全 | 漏洞挖掘】逻辑漏洞+无限制爆破实现业务瘫痪

未经许可,不得转载。 文章目录 前言正文前言 目标:target.com,是一个为设计团队服务的工作平台。 该程序允许用户创建账户并组建团队,指定的领导者担任管理员。团队类型包括: 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;} }

机器学习、深度学习和强化学习的区别

在当今的人工智能领域&#xff0c;机器学习、深度学习和强化学习是三个重要的概念&#xff0c;它们各自有着独特的特点和应用场景。下面我们来详细了解一下这些概念的区别。 一、定义和基本原理 机器学习&#xff1a;是一种让计算机通过数据学习和发现规律的方法。它使用各种…

《使用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;作为后…

音视频入门基础:FLV专题(19)——FFmpeg源码中,解码Audio Tag的AudioTagHeader,并提取AUDIODATA的实现

一、引言 从《音视频入门基础&#xff1a;FLV专题&#xff08;18&#xff09;——Audio Tag简介》可以知道&#xff0c;未加密的情况下&#xff0c;FLV文件中的一个Audio Tag Tag header AudioTagHeader AUDIODATA。本文讲述FFmpeg源码中是怎样解码Audio Tag的AudioTagHead…

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

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

一七一、React性能优化方式

在 React 中进行性能优化可以通过多种手段来减少渲染次数、优化渲染效率并减少内存消耗。以下是常见的性能优化方法及示例&#xff1a; 1. shouldComponentUpdate shouldComponentUpdate 是类组件中的生命周期方法&#xff0c;它可以让组件在判断是否需要重新渲染时&#xff…

@DeleteMapping和@PostMapping和@GetMapping和Content-Type使用记录

代码例子&#xff0c;有注释大家可以自己试一下 RestController RequestMapping(value "demo") public class TestController {//Content-Type&#xff1a;application/x-www-form-urlencoded;表单提交form-dataPostMapping("/demo1")public String test…

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

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

挑战Java面试题复习第3天,无人扶我青云志

挑战第3天 Java 创建对象有几种方式&#xff1f;有没有可能两个不相等的对象有相同的hashCode深拷贝和浅拷贝的区别final有哪些用法static有哪些用法3*0.1 0.3 返回值是什么aab与ab有什么区别try catch finally&#xff0c;try里有 return&#xff0c;finally还执行么 Java 创…

【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摘要研究背景问题…