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

HTML、CSS学习笔记4（3D转换、动画）

news 文章来源：https://blog.csdn.net/m0_73809176/article/details/129218587 2024/11/26 18:47:43

目录

一、空间转换（3D转换）

 1.空间位移

语法：

 取值：（正负均可）

透视：

2.空间旋转

3.立体呈现

二、动画（animation）

1.动画的使用

先定义动画

 再调用定义好的动画

动画序列

2.动画常见属性

2.1复合写法​编辑

2.2了解拆分写法

2.3 逐帧动画（两针之间跳格转动）&补间动画（平滑转动） ​编辑

 2.4 案例：小人跑步

3.案例

3.1走马灯

一、空间转换（3D转换）

（素材：D:\前端基础\2023寒假web学习\题目\2移动web开发\学习包\素材(3)\素材）

  • 使用transform属性实现元素在空间的位移、旋转、缩放等效果
  • 空间：x、y、z轴，z轴位置与视线方向相同（正值指向自己）

 1.空间位移

语法：

transform: translate3d(x,y,z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);x、y轴有变化，z轴并没有体现

 取值：（正负均可）

  • 像素单位数值
  • 百分比

透视：

目标：使用perspective属性实现透视效果

 

 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>透视效果</title><style>body {/* perspective添加给父级 */perspective: 1000px;}.box {width: 200px;height: 200px;margin: 100px auto;background-color: pink;transition: all 0.5s;}.box:hover {/* 正值指向自己（变大），负值变小 */transform: translateZ(200px);}</style>
</head><body><div class="box"></div>
</body></html>

2.空间旋转

 注：

  • 单位：deg

  • transform: rotateZ(360deg);与transform: rotate(360deg);效果相同

  • rotateX的时候可以保留透视属性（其父级）（perspective: 1000px;），没有的话图片旋转时会变扁 
  • rotateY(60deg)时，也要保留透视属性（其父级）（perspective: 1000px;），否则没有立体旋转效果，而是水平变扁

3.立体呈现

 案例：

 

 

 

 代码展示：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D导航</title><style>ul {margin: 0;padding: 0;list-style: none;}.navs {position: relative;width: 300px;height: 40px;margin: 50px auto;}.navs li {float: left;width: 100px;height: 40px;line-height: 40px;transition: all .5s;transform-style: preserve-3d;/* 旋转：让大家在写代码的过程中看到立体盒子  *//* transform: rotateX(-20deg) rotateY(30deg); */}.navs li a {         position: absolute;top: 0;left: 0;display: block;width: 100%;height: 100%;text-align: center;text-decoration: none;color: #fff;}.navs li a:first-child {background-color: green;transform: translateZ(20px);}.navs li a:last-child {background-color: orange;transform: rotateX(90deg) translateZ(20px);}.navs li:hover {transform: rotateX(-90deg);}</style>
</head><body><div class="navs"><ul><li><a href="#">首页</a><a href="#">Index</a></li><li><a href="#">登录</a><a href="#">Login</a></li><li><a href="#">注册</a><a href="#">Register</a></li></ul></div>
</body></html>

二、动画（animation）

（D:\前端基础\2023寒假web学习\题目\2移动web开发\学习包\素材(4)\素材）

动画是CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。

动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

1.动画的使用

注：@keyframes写在style中，不需包括在某个元素里面，而调用动画的animation写在想要实现动画的相应那个元素里面

  • 先定义动画

多个状态变化：（（百分比指的是动画总时长的占比）（一般不需在意）

/*1. 定义动画*/
@keyframes 动画名称 {0% {width: 100px;}10% {}15% {}100% {width: 200px;}
}

两个状态变化 （从XX到XX）

@keyframes 动画名称 {from {}to {}
}

  •  再调用定义好的动画

div {animation: 动画名称 动画花费时长；
}

动画序列

  • 0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列

  • 在 @keyframs中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果

  • 动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数

  • 用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%

2.动画常见属性

2.1复合写法

animation: change 1s steps(3) 2s infinite  alternate

 注：

速度曲线：（速度变化是加速/减速/匀速）——linear表示匀速，steps(3)分步动画，将动画分成三等份去执行

延迟时间：控制动画的先后出场顺序 2s

重复次数：1. 3（表示重复3次） 2. 无限循环：infinite

动画方向：alternate(带有反向动画效果)

执行完毕时状态（两种状态）：1.backwards（默认值）:让动画停留在最开始的状态； 2.forwards:让动画停留在最终的状态； （要将重复次数和动画方向注释掉，否则没有效果）

2.2了解拆分写法

 注：

  • 动画名称和时长必须有（无论是拆分还是复合），否则没有动画效果；

建议：使用复合属性（方便），注意拆分的暂停动画

2.3 逐帧动画（两针之间跳格转动）&补间动画（平滑转动）

 

 

 2.4 案例：小人跑步

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>精灵动画</title><style>.box {/* 1.准备显示区域 *//* 1680px/12 (总宽度1680px 12个小人): 保证显示区域的尺寸和一个精灵小图的尺寸相同 */width: 140px;height: 140px;/* border: 1px solid #000; */background-image: url(./images/bg.png);/* 3.使用动画 */animation: move 1s steps(12) infinite;}/* 2.定义动画 */@keyframes move {from {background-position: 0 0;}to {background-position: -1680px 0;/* 正的1680往右走 */}}</style>
</head><body><div class="box"></div>
</body></html>

思考：

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>精灵动画</title><style>.box {position: absolute;left: 0;width: 140px;height: 140px;background-image: url(./images/bg.png);/* 净零小图个数 */animation:move 1s steps(12) infinite ,/* 注意：多个动画名称之间用逗号隔开 */run 1s forwards;}@keyframes move {from {background-position: 0 0;}to {/* 1680:精灵图的宽度 */background-position: -1680px 0;}}/* 思考：想让小人跑远一些 *//* 定义一个盒子移动的动画 800px */@keyframes run {/* 动画的开始状态和盒子的默认样式相同的，可以省略开始状态的代码 *//* from {transform: translateX(0);} */to {transform: translateX(800px);}}</style>
</head><body><div class="box"></div>
</body></html>

3.案例

3.1走马灯

（D:\前端基础\2023寒假web学习\题目\2移动web开发\学习包\2.2.11作业\作业\走马灯）

3.1.1 分析

（方框的长度是3张图的长度）共7张图，但每张图片从左到右自动移动，无法判断哪张图是第一张图，同时每张图无空白移动（即紧密挨着），但是第5张图移动出时，第七张图旁边是空白，所以设置10张图，8、9、10图是原来的1、2、3图。

 3.1.2 代码展示

<!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;}li {list-style: none;}img {width: 200px;}.box {width: 600px;height: 112px;border: 5px solid #000;margin: 100px auto;overflow: hidden;}.box ul {width: 2000px;animation: move 10s infinite linear;/* linear表示匀速 */}.box li {float: left;}/* 定义动画：位移，ul 向左侧移动  -1400 */@keyframes move {to {transform: translateX(-1400px);}}/* 用户鼠标移入box，动画暂停 */.box:hover ul {animation-play-state: paused;}</style></head><body><div class="box"><ul><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li><li><img src="./images/4.jpg" alt="" /></li><li><img src="./images/5.jpg" alt="" /></li><li><img src="./images/6.jpg" alt="" /></li><li><img src="./images/7.jpg" alt="" /></li><li><img src="./images/1.jpg" alt="" /></li><li><img src="./images/2.jpg" alt="" /></li><li><img src="./images/3.jpg" alt="" /></li></ul></div></body>
</html>

 

相关文章：

HTML、CSS学习笔记4（3D转换、动画）

目录 一、空间转换&#xff08;3D转换&#xff09; 1.空间位移 语法&#xff1a; 取值&#xff1a;&#xff08;正负均可&#xff09; 透视&#xff1a; 2.空间旋转 3.立体呈现 二、动画&#xff08;animation&#xff09; 1.动画的使用 先定义动画 再调用定义好的动画 …...

编程日记 2023/2/28 5:33:42

java的分布式锁

什么是分布式锁 分布式锁是指分布式环境下&#xff0c;系统部署在多个机器中&#xff0c;实现多进程分布式互斥的一种锁。为了保证多个进程能看到锁&#xff0c;锁被存在公共存储&#xff08;比如 Redis、Memcache、数据库等三方存储中&#xff09;&#xff0c;以实现多个进程并…...

编程日记 2023/2/28 5:32:36

17- TensorFlow实现手写数字识别 (tensorflow系列) (项目十七)

项目要点 模型创建: model Sequential()添加卷积层: model.add(Dense(32, activationrelu, input_dim100)) # 第一层需要 input_dim添加dropout: model.add(Dropout(0.2))添加第二次网络: model.add(Dense(512, activationrelu)) # 除了first, 其他层不要输入shape添加输出…...

编程日记 2023/2/28 5:30:25

Polkadot 基础

Polkadot Polkadot联合并保护了一个不断增长的专业区块链生态系统&#xff0c;称为parachains。Polkadot上的应用程序和服务可以安全地跨链通信&#xff0c;形成真正可互操作的去中心化网络的基础。 真正的互操作性 Polkadot支持跨区块链传输任何类型的数据或资产&#xff0c;…...

编程日记 2023/2/28 5:29:13

spring源码编译

spring源码编译1、安装gradle2、拉取源码3、配置gradle文件来源及镜像仓库4、预编译5、验证6、可能遇到的报错6.1、jdk.jfr不存在6.2、checkstyleMain6.3、org.gradle.api.artifacts.result.ComponentSelectionReason.getDescription()Ljava/lang/String6.4、其他jdk&#xff1…...

编程日记 2023/2/28 5:28:06

防盗链是什么？带你了解什么是防盗链

目录 什么是防盗链 防盗链的定义 防盗链的产生 防盗链的实现 什么是防盗链 防盗链其实就是采用服务器端编程&#xff0c;通过url过滤技术实现的防止盗链的软件。 比如&#xff1a;photo.abc.com/video.mp4 这个下载地址&#xff0c;如果没有装防盗链&#xff0c;别人就能轻…...

编程日记 2023/2/28 5:26:55

Linux基础命令-fdisk管理磁盘分区表

文章目录 fdisk 命令介绍 命令格式 基本参数 1&#xff09;常用参数 2&#xff09;fdisk菜单操作说明 创建一个磁盘分区 1&#xff09;创建分区 2&#xff09;创建交换分区 参考实例 1&#xff09; 显示当前分区的信息 2&#xff09; 显示每个磁盘的分区信息 命令…...

编程日记 2023/2/28 5:25:41

（四）K8S 安装 Nginx Ingress Controller

ingress-nginx 是 Kubernetes 的入口控制器&#xff0c;使用NGINX作为反向代理和负载均衡器 版本介绍 版本1&#xff1a;Ingress NGINX Controller(k8s社区的ingres-nginx) 以 NGINX 开源技术为基础&#xff08;kubernetes.io&#xff09;&#xff0c;可在GitHub的 kubernet…...

编程日记 2023/2/28 5:24:30

高频面试题

MyISAM和InnoDB是MySQL两种常见的存储引擎&#xff0c;它们之间有以下几点区别&#xff1a; 事务支持&#xff1a;MyISAM不支持事务处理&#xff0c;而InnoDB支持事务处理。 行级锁&#xff1a;MyISAM只支持表级锁&#xff0c;而InnoDB支持行级锁&#xff0c;可以避免并发访问…...

编程日记 2023/2/28 5:23:21

js 字节数组操作，TCP协议组装

js字节数组&#xff0c;进制转换js基础知识数组 Array扩展操作符三个点&#xff08;...&#xff09;ArrayBufferslice() 数组复制reduce 对数组中的每个元素执行一个提供的函数,将其结果汇总为单个返回值splice 数组删除&#xff0c;添加&#xff0c;替换js 字节数组转数字以及…...

编程日记 2023/2/28 5:22:12

JavaScript的引入并执行-包含动态引入与静态引入

JavaScript的引入并执行-包含动态引入与静态引入 JavaScript引入方式 html文件需要引入JavaScript代码&#xff0c;才能在页面里使用JavaScript代码。 静态引入 行内式 直接在DOM标签上使用 <!DOCTYPE html> <html lang"en"> <head><meta ch…...

编程日记 2023/2/28 5:21:05

第四阶段01-酷鲨商城项目准备

1. 关于csmall-product项目 这是“酷鲨商城”大项目中的“商品管理”项目&#xff0c;是一个后台管理项目&#xff08;给管理员&#xff0c;或运营人员使用的项目&#xff0c;并不是普通用户使用的&#xff09;&#xff0c;并且&#xff0c;只会涉及与发布商品可能相关的功能开…...

编程日记 2023/2/28 5:19:52

Uncaught ReferenceError: jQuery is not defined

今天在拉取项目部署到本地的时候遇到了一个问题特此记录一下 &#xff08;以后闭坑&#xff09; 我和同事同时拉取了一样的代码&#xff0c;结果同事的页面加载正常而我的页面像被狗啃了一样&#xff0c;知道是js的问题但是不知道问题出在哪里&#xff1f;后来还是同事帮我解决…...

编程日记 2023/2/28 5:17:28

面试阿里测开岗，被面试官针对，当场翻脸，把我的简历还给我，疑似被拉黑...

好家伙&#xff0c;金三银四一到&#xff0c;这奇葩事可真是多&#xff0c;前两天和粉丝聊天&#xff0c;他说前段时间面试阿里的测开岗&#xff0c;最后和面试官干起来了。 我问他为什么&#xff0c;他说没啥&#xff0c;就觉得面试官太装了&#xff0c;就爱问一些虚而不实的…...

编程日记 2023/2/28 5:16:10

2. 驱动开发--驱动开发环境搭建

文章目录前言一、Linux中配置编译环境1.1 linux下安装软件的方法1.2 交叉编译工具链的安装1.2.1 测试是否安装成功1.3 设置环境变量1.3.1 将工具链导出到环境变量1.4 为工具链创建arm-linux-xxx符号链接二、 搭建运行开发环境2.1 tftp网络方式加载内核和设备树文件2.2 nfs网络方…...

编程日记 2023/2/28 5:15:02

《数据库系统概论》学习笔记——第四章 数据库安全

教材为数据库系统概论第五版&#xff08;王珊&#xff09; 这一章简单记一下那几条sql的用法和两种存取控制和审计&#xff08;今年期末考了&#xff09;吧&#xff0c;不知道有啥好考的 数据库安全性 问题的提出 数据库的一大特点是数据可以共享数据共享必然带来数据库的安全…...

编程日记 2023/2/28 5:13:56

山洪径流过程模拟及洪水危险性评价

目录 1.洪水淹没危险性评价方法及技术讲解 2.GIS水文信息提取与分析(基于ArcGIS软件) 3.洪水淹没模拟水文分析&#xff1a;洪峰流量估算 4.洪水淹没模拟水力学分析&#xff1a;Hec-RAS实例操作 GIS水文分析&#xff08;ArcHydro、Spatial Anlysist等模块&#xff09;是流域…...

编程日记 2023/2/28 5:12:49

LeetCode HOT100 (23、32、33)

目录 23、合并K个升序链表 32、最长有效括号 33、搜索旋转排序数组 23、合并K个升序链表 思路&#xff1a;采用顺序合并的方法&#xff0c;用一个变量 ans 来维护以及合并的链表&#xff0c;第 i 次循i 个链表和 ans合并&#xff0c;答案保存到 ans中。 代码&#xff1a; …...

编程日记 2023/2/28 5:11:41

电力监控仪表主要分类

电力监控仪表是电工仪表行业的一个新兴、细分行业&#xff0c;类别属于安装式数字仪表&#xff0c;从模拟指针式仪表和电量变送器演变而来。随着计算机技术的发展&#xff0c;电力监控仪表已应用到电力系统的发、输、变、配、用的各个环节&#xff0c;实现对电网电参量的测量、…...

编程日记 2023/2/28 5:10:34

山野户外定位依赖GPS或者卫星电话就能完成么？

每当有驴友失联的新闻报道&#xff0c;很多的户外“老鸟”和“菜鸟”都在讲&#xff1a;为什么不带卫星电话&#xff0c;不带GPS……云云&#xff01;提一个小小的问题&#xff1a;如果你拿着卫星电话、GPS或者其他即时通信的其他设备&#xff0c;你就能准定位你所处的位置么&a…...

编程日记 2023/2/28 5:09:29

SAP 应收应付重组配置

应收应付重组是为了使资产负债表真实的反映资产及负债的真实情况&#xff0c;需要对应收、应付账款的余额时行实际调整。即将“应收账款”的贷方余额和“应付账款”的借方余额分别调整至“预收账款”与“预付账款”账户中。 应收应付重组SAP系统是按照公司代码、客户/供应商、…...

编程日记 2023/2/28 5:08:21

算法练习（八）计数质数(素数)

1、问题描述&#xff1a; 给定整数 n &#xff0c;返回 所有小于非负整数 n 的质数的数量 。 2、示例如下&#xff1a; 3、代码如下&#xff1a; 第一种&#xff1a;比较暴力的算法 class Solution {public int countPrimes(int n) {int count1;if(n<2) return 0;for(in…...

编程日记 2023/2/28 5:07:11

用反射模拟IOC模拟getBean

IOC就是spring的核心思想之一&#xff1a;控制反转。这里不再赘述&#xff0c;看我的文章即可了解&#xff1a;spring基础思想IOC其次就是java的反射&#xff0c;反射机制是spring的重要实现核心&#xff0c;今天我看spring的三级缓存解决循坏引用的问题时&#xff0c;发现一个…...

编程日记 2023/2/28 5:06:03

【Ap AutoSAR入门与实战开发02】-【Ap_s2s模块01】： s2s的背景

总目录链接==>> AutoSAR入门和实战系列总目录 文章目录 1 s2s的背景？2 AUTOSAR 方法应支持车辆的无缝开发2.1 面向服务的ECU的解读2.2 面向信号的ECU的解读2.3 通过网关ECU实现转换1 s2s的背景？ Cp AutoSAR基于传统的can，lin，flexray总线的通信，一般是面向信号设…...

编程日记 2023/2/28 5:04:55

C语言数据结构(3)----无头单向非循环链表

目录 1. 链表的概念及结构 2. 链表的分类 3. 无头单向非循环链表的实现(下面称为单链表) 3.1 SListNode* BuySListNode(SLTDateType x) 的实现 3.2 void SListPrint(SListNode* plist) 的实现 3.3 void SListPushBack(SListNode** pplist, SLTDateType x) 的实现 3.4 voi…...

编程日记 2023/2/28 5:03:48

Android 实现菜单拖拽排序

效果图简介本文主角是ItemTouchHelper。它是RecyclerView对于item交互处理的一个「辅助类」&#xff0c;主要用于拖拽以及滑动处理。以接口实现的方式&#xff0c;达到配置简单、逻辑解耦、职责分明的效果&#xff0c;并且支持所有的布局方式。功能拆解功能实现4.1、实现接口自…...

编程日记 2023/2/28 5:02:40

通过window.open打开新的页面并修改样式添加内容

const img new Image(); img.src res; //res是图片的路径地址 const newWin window.open(, _blank); newWin.document.write(img.outerHTML); // newWin.document.body.style.background #000; newWin.document.body.style.textAlign center; newWin.document.body.oncl…...

编程日记 2023/2/28 5:01:31

Java中 Synchronized 的用法

《编程思想之多线程与多进程(1)——以操作系统的角度述说线程与进程》一文详细讲述了线程、进程的关系及在操作系统中的表现&#xff0c;这是多线程学习必须了解的基础。本文将接着讲一下Java线程同步中的一个重要的概念synchronized. synchronized是Java中的关键字&#xff0c…...

编程日记 2023/2/28 5:00:23

Rust语言的基本介绍

rust缘起和目标 rust的英文是锈菌&#xff0c;是一种真菌&#xff0c;这种真菌的生命力非常顽强&#xff0c;其 在生命周期内可以产生多达5种孢子类型&#xff0c;这5种生命形态还可以相互转 化。“Rust”也有“铁锈”的意思&#xff0c;暗合“裸金属”之意&#xff0c;代表了R…...

编程日记 2023/2/28 4:59:16

新冠小阳人症状记录

原想挺过春节后再养&#xff0c;发现事与愿违。生理期期间抵抗力下降&#xff0c;所以在生理期第二天就有些症状了。可能是生理期前一天出去采购食物染上&#xff0c;也可能是合租夫妻染上。anyway&#xff0c;记录下自己的症状与相应有效的偏方&#xff1a; 第一天&#xff1a…...

编程日记 2023/2/28 4:58:07

门户网站建设先进性/app安装下载

点击上方蓝色字体&#xff0c;选择“标星公众号”优质文章&#xff0c;第一时间送达关注公众号后台回复pay或mall获取实战项目资料视频作者&#xff1a;rickiyang原文&#xff1a;www.cnblogs.com/rickiyang/p/11074232.html谈到序列化我们自然想到 Java 提供的 Serializable 接…...

编程日记 2024/11/26 18:39:22

模版网站建设步骤详解/建网站的详细步骤

2019独角兽企业重金招聘Python工程师标准>>> 事件 – open/message/close/errorWebSocket#onopen, onmessage, onclose, onerror连接打开时&#xff0c;回调onopen方法&#xff0c;接收到后台消息时会触发到onmessage事件&#xff0c;后台关闭时调用onclose&#xf…...

编程日记 2024/11/26 16:57:16

网站建设排版规定/产品免费推广网站有哪些

1 线程实现方式 序号实现方式描述1实现Runnable接口无返回值&#xff0c;Thread方式也是实现Runnable接口2实现Callable接口有返回值3实现Executor接口线程池方式&#xff0c;ExecutorService接口继承Executor接口&#xff0c;Executors类使用ExecutorService接口创建线程池 2…...

编程日记 2024/11/26 16:45:08

无锡专业网站制作的公司/房产网站模板

数据结构与算法总览 文章目录数据结构与算法总览1、职业训练&#xff1a;拆分知识点、刻意练习、反馈&#xff08;1&#xff09;Chunk it up 切碎知识点数据结构算法&#xff08;2&#xff09;Deliberate Practicing 刻意练习&#xff08;3&#xff09;Feedback反馈2、五步刷题…...

编程日记 2024/11/26 13:30:27

好的外贸平台/福州seo建站

任何一门语言中&#xff0c;相信this的指向问题都是一个重点&#xff0c;js也不例外。js中的作用域分为全局作用域和局部作用域&#xff0c;在全局作用域中&#xff0c;this指向的是他的全局对象window&#xff0c;如下在全局中打印this&#xff1a;console.log(this);输出&…...

编程日记 2024/11/26 11:24:51

禅城做网站/重庆百度推广电话

&#xfeff;&#xfeff;public class StringUtils extends Object Operations on String that are null safe. 字符串是null安全的&#xff0c;不会抛出NullPointerException&#xff0c;都做了相应的处理。 IsEmpty/IsBlank - checks if a String contains text IsEmpty…...

编程日记 2024/11/26 10:26:15