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

CSS3D+动画

news 2025/10/30 23:31:54

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"><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 的流操作中，可以使用 distinct 方法来对一个对象流进行去重，但是默认情况下它会使用对象的 equals() 方法来判断重复。如果你希望根据对象的某个属性进行去重，则可以使用 …...

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

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

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

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

HTML及CSS入门及精通

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

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

frp实现二级代理

kali是攻击机 （192.168.0.106） windows server2012是边界服务器，拥有两个网卡，作为一级代理， （192.168.0.108，10.10.10.136） ad01是内网机器，不出网 （10.10.1…...

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

Vue组件设置背景色

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

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

Java+Github+Jenkins部署

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

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

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

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

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

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

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

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

axios 和fetch的取舍，以及比较

废话不多说，直接直捣黄龙： 区别相同点都是一种基于promise的异步解决方案。都可以解决回调地狱问题不同点 axios是一个封装好的库，需要npm进行安装，fetch是es6新增的api 语法： 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：caogao1.py输入数据界面程序2：caogao2.py接收数据界面程序3 ：将输入数据界面和接收数据界面组合成一个总界面讲解总结前言在编写pyqt 页面时有时候需要不同页面进行数据传输。本文讲解静态函数方法。直接看示例。程…...

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

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

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

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

ubuntu 安装指定版本：nodejs

通过 PPA 安装指定或最新版本的 nodejs 那么就需要使用 nodesource 来安装指定版本的 nodejs 了。其需要下载一个脚本，运行此脚本会在 ubuntu 里添加一个 nodejs 源，然后用 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

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

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

编程日记 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（Maven 发布插件）是一个用于帮助在Maven项目中执行版…...

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

2023.8.29 关于性能测试

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

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

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

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

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

华为云AI开发平台ModelArts

华为云ModelArts：重塑AI开发流程的“智能引擎”与“创新加速器”！ 在人工智能浪潮席卷全球的2025年，企业拥抱AI的意愿空前高涨，但技术门槛高、流程复杂、资源投入巨大的现实，却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/10/30 10:46:29

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。使用Express可以快速地搭建一个完整功能的网站。 Expre…...

编程新知 2025/10/30 10:46:53

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢，博主的学习进度也是步入了Java Mybatis 框架，目前正在逐步杨帆旗航。那么接下来就给大家出一期有关 Mybatis 逆向工程的教学，希望能对大家有所帮助，也特别欢迎大家指点不足之处，小生很乐意接受正确的建议&…...

编程新知 2025/10/29 9:05:02

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日，中天合创屋面分布式光伏发电项目顺利并网发电，该项目位于内蒙古自治区鄂尔多斯市乌审旗，项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站，总装机容量为9.96MWp。项目投运后，每年可节约标煤3670…...

编程新知 2025/10/30 21:12:38

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/10/27 21:51:36

多种风格导航菜单 HTML 实现（附源码）

下面我将为您展示 6 种不同风格的导航菜单实现，每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...

编程新知 2025/10/30 22:15:39