当前位置： 首页 > news >正文

CSS3D+动画

news 2026/5/21 8:18:34

CSS3D

在这里插入图片描述
在这里插入图片描述

1.css3D

  1. 给父元素设置

    • perspective:景深:近大远小的效果900-1200px这个范围内

    • transform-style:是否设置3D环境

      flat 2D环境 默认值

      perserve-3D环境

  2. 3D功能函数

    1.位移:

    • translateZ()
    • translate3D(x,y,z)
    <!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {/* 景深 近大远小 设置一个就可以了 */perspective: 1200px;/* 提高3D环境,哪个子元素需要,就到对应的父元素上面设置 */transform-style: preserve-3d;}* {padding: 0;margin: 0;}.box1 {width: 600px;height: 400px;background-color: rgba(0, 0, 0, 0.5);margin: 100px;transform-style: preserve-3d;/* 设置旋转侧面 */transform: rotateY(80deg);}.box2 {width: 100px;height: 150px;background-color: red;transition: all 1s;}.box1:hover .box2 {transform: translate3d(0px, 0px, 100px);transform: translateZ(100px) translateX(100px);}</style>
</head><body><div class="box1"><div class="box2"></div></div>
</body></html>

    2.3D旋转

    属性:

    rotateX()

    rotateY()

    rotateZ()

    rotate3D(x,y,z,deg)

    x,y,z:0-1 0不旋转

    deg:旋转的角度

3.3D缩放

缩放：
scaleZ()
scale(x,y,z)
【注】单独使用没有明显效果，需要配合其他功能函数

4.观察角度

perspective-origin:水平垂直；观测立方体的角度
left center right
top center bottom
px %

2.动画

定义方式一

动画：
1：定义关键帧
1:定义方式一
@keyframes 动画名字{from{}初始状态to{}结束状态
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}.box1 {width: 500px;height: 400px;background-color: pink;margin: 100px auto;}.box2 {width: 100px;height: 100px;background-color: skyblue;/* 调用动画 */animation-name: dh;animation-duration: 3s;}/* 定义动画:方式1  */@keyframes dh {form {transform: translateX(0px);}to {transform: translateX(100px);}}</style>
</head><body><div class="box1"><div class="box2"></div></div>
</body></html>

定义方式二：

定义方式二：
@keyframes动画名字{0%{}50%{}100%{}

调用动画:

animation:动画名称 动画时间 延迟时间
动画类型 循环次数 运动方向；
animation-name:动画名称；
animation-duration:动画时间；
animation-delay:延迟时间；
animation-timing-function:动画类型；lineareaseease-inease-outease-in-outstep-start逐帧动画steps(数字)逐帧动画
animation-iteration-count:循环次数；具体数字infinite无限循环
animation-direction:运动方向normal 默认值reverse 反向运动alternate 先正后反alternate-reverse先反后正
animation-play-state:是否运动；running运动paused暂停

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}.box1 {width: 500px;height: 400px;background-color: pink;margin: 100px auto;}.box2 {width: 100px;height: 100px;background-color: skyblue;/* 调用动画 *//* 动画名称 */animation-name: move;/* 动画运动时间 */animation-duration: 3s;/* 动画延迟时间 */animation-delay: 3s;/* 动画类型 */animation-timing-function: linear;/* 循环次数 3次 */animation-iteration-count: 3;/* 无限循环 */animation-iteration-count: infinite;/* 默认运动 */animation-direction: normal;/* 反向运动 */animation-direction: reverse;/* 先正后反 */animation-direction: alternate;/* 先反后正 */animation-direction: alternate-reverse;}.box1:hover .box2 {/* 默认值 运动 */animation-play-state: running;/* 鼠标移入暂停 */animation-play-state: paused;}/* 定义动画方式二 */@keyframes move {0% {transform: translateX(0) translateY(0);}25% {transform: translateX(400px) translateY(0);}50% {transform: translateX(400px) translateY(300px);}75% {transform: translateX(0) translateY(300px);}100% {transform: translateX(0) translateY(0);}}</style>
</head><body><div class="box1"><div class="box2"></div></div>
</body></html>

transition:过渡；和animation:动画；的区别：
1:都是是动画效果
2:前者需要触发方式，后者页面一加载完就立即执行

相关文章：

CSS3D+动画

CSS3D 1.css3D 给父元素设置 perspective:景深:近大远小的效果900-1200px这个范围内 transform-style:是否设置3D环境 flat 2D环境 默认值 perserve-3D环境 3D功能函数 1.位移: translateZ()translate3D(x,y,z) <!DOCTYPE html> <html lang"en"><h…...

编程日记 2023/8/30 8:42:49

list对象中如何根据对象中某个属性去重使用Java8流实现

list对象中如何根据对象中某个属性去重使用Java8流实现? 在 Java 8 的流操作中&#xff0c;可以使用 distinct 方法来对一个对象流进行去重&#xff0c;但是默认情况下它会使用对象的 equals() 方法来判断重复。如果你希望根据对象的某个属性进行去重&#xff0c;则可以使用 …...

编程日记 2023/8/30 8:41:48

2023 在Windows上的安装Faiss-GPU（使用anaconda）

该方法安装完 faiss-gpu 之后&#xff0c;不仅会装这个库&#xff0c;还会装很多依赖库。为了防止自己本地一些同名库的版本被修改&#xff0c;建议新建一个虚拟环境来安装。如果本地库版本修改对自己没影响&#xff0c;也可以忽略。 你好&#xff0c;我是悦创。 登录网站&…...

编程日记 2023/8/30 8:40:46

HTML及CSS入门及精通

前言 HTML&#xff08;超文本标记语言&#xff09;和CSS&#xff08;层叠样式表&#xff09;是构建网页的两个基本技术。HTML用于定义网页的结构和内容&#xff0c;而CSS用于控制网页的样式和布局。本教程将介绍HTML和CSS的入门知识&#xff0c;并逐步引导您掌握更高级的技巧和…...

编程日记 2023/8/30 8:39:45

frp实现二级代理

kali是攻击机 &#xff08;192.168.0.106&#xff09; windows server2012是边界服务器&#xff0c;拥有两个网卡&#xff0c;作为一级代理&#xff0c; &#xff08;192.168.0.108&#xff0c;10.10.10.136&#xff09; ad01是内网机器&#xff0c;不出网 &#xff08;10.10.1…...

编程日记 2023/8/30 8:38:43

Vue组件设置背景色

vh&#xff1a;浏览器视区高度百分值 wh&#xff1a;浏览器视区宽度百分值 min-height&#xff1a;最小高度&#xff0c;其他时候自适应 给组件根标签设置&#xff1a;min-height&#xff1a;100vh&#xff0c;就可以正常添加背景色&#xff0c;而且背景色随内容展开而自适…...

编程日记 2023/8/30 8:37:41

Java+Github+Jenkins部署

Java项目—Jenkins部署笔记 一&#xff0c;准备 一台服务器操作系统&#xff0c;示例为ubuntu 22.0.4 可运行lsb_release -a查看 二&#xff0c;安装 docker 更新软件包列表&#xff1a; sudo apt update安装必要的软件包&#xff0c;以便使用HTTPS通过APT下载软件包&#x…...

编程日记 2023/8/30 8:36:40

vue使用命令npm install 报错 cb() never called!

一.错误说明,npm本身下载就慢&#xff0c;有可能是网络的问题。 二.解决方案,把npm设置成淘宝镜像后,再重新npm install npm config set registry https://registry.npm.taobao.org 三.还是不行&#xff0c;还会出现同样的问题&#xff0c;那接下来先清理一下npm缓存 npm cache…...

编程日记 2023/8/30 8:35:39

什么是LatexEasy及其在数学排版中的作用

LatexEasy是一种强大的排版系统&#xff0c;特别擅长处理数学公式和科技文档。它基于 TeX&#xff0c;是由计算机科学家 Donald Knuth 开发的。LaTeX 可以让你专注于内容&#xff0c;而不必过多关心排版细节&#xff0c;特别适用于数学家、工程师和科学研究者。 什么是 LaTeX&…...

编程日记 2023/8/30 8:34:38

axios 和fetch的取舍，以及比较

废话不多说&#xff0c;直接直捣黄龙&#xff1a; 区别 相同点 都是一种基于promise的异步解决方案。都可以解决回调地狱问题 不同点 axios是一个封装好的库&#xff0c;需要npm进行安装&#xff0c;fetch是es6新增的api 语法&#xff1a; fetch(url, { method: GET, // o…...

编程日记 2023/8/30 8:33:37

K-Means（K-均值）聚类算法理论和实战

目录 K-Means 算法 K-Means 术语 K 值如何确定 K-Means 场景 美国总统大选摇争取摆选民 电商平台用户分层 给亚洲球队做聚类 ​编辑 其他场景 K-Means 工作流程 K-Means 开发流程 K-Means的底层代码实现 K-Means 的评价标准 K-Means 算法 对于 n 个样本点来说&am…...

编程日记 2023/8/30 8:32:35

Python-pyqt不同窗口数据传输【使用静态函数】

文章目录 前言程序1&#xff1a;caogao1.py输入数据界面程序2&#xff1a;caogao2.py接收数据界面 程序3 &#xff1a;将输入数据界面和接收数据界面组合成一个总界面讲解 总结 前言 在编写pyqt 页面时有时候需要不同页面进行数据传输。本文讲解静态函数方法。直接看示例。 程…...

编程日记 2023/8/30 8:31:33

百度垂类离线计算系统发展历程

作者 | 弘远君 导读 本文以百度垂类离线计算系统的演进方向为主线&#xff0c;详细描述搜索垂类离线计算系统发展过程中遇到的问题&#xff0c;以及对应的解决方案。架构演进过程中一直奉行“没有最好的架构&#xff0c;只有最合适的架构”的宗旨&#xff0c;面对不同阶段遇到的…...

编程日记 2023/8/30 8:30:32

ubuntu 安装 指定版本：nodejs

通过 PPA 安装指定或最新版本的 nodejs 那么就需要使用 nodesource 来安装指定版本的 nodejs 了。其需要下载一个脚本&#xff0c;运行此脚本会在 ubuntu 里添加一个 nodejs 源&#xff0c;然后用 apt 就可以下载指定的 nodejs 了。 PPA 的全称为 personal package archive 。要…...

编程日记 2023/8/30 8:29:31

16.CSS菜单悬停特效

效果 源码 <!DOCTYPE html> <html> <head> <title>Creative Menu Item Hover Effects</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body><section><…...

编程日记 2023/8/30 8:28:29

恒运资本：市盈率怎么算？

市盈率&#xff08;P/E ratio&#xff09;是判别一家公司股票价格合理性的一个重要目标&#xff0c;也是投资者评估公司股票投资价值的重要参阅目标。市盈率越高&#xff0c;表明相对于公司的收益来说&#xff0c;该公司的股票定价越高。市盈率越低&#xff0c;则表明该股票被低…...

编程日记 2023/8/30 8:27:28

Docker运维中常见错误以及解决方法汇总1

1.报错如下: Another app is currently holding the yum lock; waiting for it to exit... 另一个应用程序是：PackageKit 原因:另一个APP正在锁定yum,等待其退出！ 解决:执行指令 rm -f /var/run/yum.pid 2.CentOS7设置静态的IP且可以上网...

编程日记 2023/8/30 8:26:26

Maven - 使用maven-release-plugin规范化版本发布

文章目录 Maven Release plugin – IntroductionMaven Release plugin – Plugin DocumentationMaven Release plugin – Usage实战案例 Maven Release plugin – Introduction Maven Release Plugin&#xff08;Maven 发布插件&#xff09;是一个用于帮助在Maven项目中执行版…...

编程日记 2023/8/30 8:25:25

2023.8.29 关于性能测试

目录 什么是性能测试&#xff1f; 性能测试常见术语及其性能测试衡量指标 并发 用户数 响应时间 事务 点击率 吞吐量 思考时间 资源利用率 性能测试分类 基准性能测试 负载性能测试 压力性能测试 可靠性性能测试 性能测试执行流程 什么是性能测试&#xff1f; 性…...

编程日记 2023/8/30 8:24:23

基于MATLAB的径向基函数插值（RBF插值）（一维、二维、三维）

基于MATLAB的径向基函数插值&#xff08;RBF插值&#xff09;&#xff08;一维、二维、三维&#xff09; 0 前言1 RBF思路2 1维RBF函数2.1 参数说明2.1.1 核函数选择2.1.2 作用半径2.1.3 多项式拟合2.1.4 误差项&#xff08;光滑项&#xff09; 3 2维RBF函数4 3维RBF函数 惯例声…...

编程日记 2023/8/30 8:23:21

2026年阿里云OpenClaw/Hermes Agent配置Token Plan新手友好流程

2026年阿里云OpenClaw/Hermes Agent配置Token Plan新手友好流程。OpenClaw是开源的个人AI助手&#xff0c;Hermes Agent则是一个能自我进化的AI智能体框架。阿里云提供计算巢、轻量服务器及无影云电脑三种部署OpenClaw 与 Hermes Agent的方案、百炼Token Plan兼容主流 AI 工具&…...

编程新知 2026/5/21 7:30:54

[STM32U3] 【STM32U385RG 测评】02+调试串口1输出字符串

一&#xff1a;:STM32U385 串口知识分享 通用同步/异步收发器(USART) 这些设备有两个嵌入式通用同步接收器发送器(USART1和USART3)以及两个通用异步接收器发送器(UART4和UART5) 该USART提供了一个灵活的手段来执行全双工数据交换与外部设备需要一个行业标准的NRZ异步串行数据格…...

编程新知 2026/5/21 5:31:29

NovelReader插件化扩展指南：如何添加新的翻页效果

NovelReader插件化扩展指南&#xff1a;如何添加新的翻页效果 【免费下载链接】NovelReader 仿照"任阅"的追书、看书的小说阅读器。重写"任阅"的代码&#xff0c;优化代码逻辑和代码结构&#xff0c;降低内存使用率。重写小说阅读器&#xff0c;支持网络阅…...

编程新知 2026/5/21 4:43:30

夹矸煤层采煤机螺旋滚筒工作性能优化【附代码】

✨ 长期致力于夹矸煤层、螺旋滚筒、工作性能、可靠性、多目标优化研究工作&#xff0c;擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流&#xff0c;点击《获取方式》 &#xff08;1&#xff09;离散元-有限元耦合截割模型与煤岩参…...

编程新知 2026/5/21 3:29:42

八股整理之JUC篇

怎么保证多线程安全&#xff1f;synchronized关键字:可以使用synchronized关键字来同步代码块或方法&#xff0c;确保同一时刻只有一个线程可以访问这些代码。对象锁是通过synchronized关键字锁定对象的监视器(monitor&#xff09;来实现的。volatile关键字&#xff1a;volatil…...

编程新知 2026/5/21 1:58:36

Perplexity地理信息查询性能断崖式下跌？20年GIS架构师曝出隐藏瓶颈：HTTP/2连接复用失效+TLS 1.3握手阻塞链

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;Perplexity地理信息查询性能断崖式下跌现象全景透视 近期多个生产环境观测到&#xff0c;Perplexity模型在处理含经纬度坐标、行政区划嵌套&#xff08;如“北京市朝阳区三里屯街道附近500米内POI”&#xff…...

编程新知 2026/5/21 0:35:16

YOLOv11厨房食材目标检测数据集-2499张-Meat-1_5

YOLOv11厨房食材目标检测数据集 &#x1f4ca; 数据集基本信息 目标类别&#xff1a; [‘ayam’, ‘beef’, ‘pork’]中文类别&#xff1a;[‘鸡肉’, ‘牛肉’, ‘猪肉’]训练集&#xff1a;2256 张验证集&#xff1a;164 张测试集&#xff1a;79 张总计&#xff1a;2499 张 …...

编程新知 2026/5/21 0:04:05

手把手教你用C#搞定海康机器人扫码枪的TCP通信（附完整Socket代码）

工业级条码采集实战&#xff1a;C#与海康扫码枪的TCP通信深度解析 在自动化仓储和智能制造场景中&#xff0c;海康威视工业扫码枪凭借其卓越的解码性能和稳定的通信机制&#xff0c;已成为产线数据采集的首选设备之一。不同于消费级扫码器的即插即用特性&#xff0c;工业级设备…...

编程新知 2026/5/20 23:47:38

Java WebSocket六种集成方案详解：从JSR 356到Spring生态实战

1. 项目概述最近在折腾一个基于 Spring Cloud 的 WebSocket 集群方案时&#xff0c;我不得不把 Java 生态里那些五花八门的 WebSocket 集成方式都翻了个底朝天。不研究不知道&#xff0c;一个看似简单的 WebSocket&#xff0c;在 Java 世界里竟然有这么多“门派”&#xff0c;从…...

编程新知 2026/5/20 23:16:30

Ubuntu 22.04下编译安装Realtek RTL8852BE驱动，内核版本大于5.18和小于5.18的区别操作

Ubuntu 22.04下Realtek RTL8852BE驱动编译指南&#xff1a;内核版本差异全解析 当你兴奋地在新买的RedmiBook上安装Ubuntu 22.04&#xff0c;却发现WiFi图标神秘消失时&#xff0c;别慌——这很可能是因为Realtek RTL8852BE这块WiFi 6网卡在Linux下的驱动支持问题。作为一块性能…...

编程新知 2026/5/20 22:21:05