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

CSS3D+动画

news 2025/7/12 16:53:38

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

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/7/7 12:11:39

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/6/15 6:20:40

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/6/27 0:59:29

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2025/6/24 3:45:54

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

编程新知 2025/7/10 10:42:25

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/6/18 4:00:59

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2025/7/8 17:54:23

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

编程新知 2025/7/10 18:29:53

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

编程新知 2025/7/9 2:49:50

uniapp手机号一键登录保姆级教程（包含前端和后端）

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

编程新知 2025/7/12 1:32:30