css:转换
转换
移动
/* transform: translate(100px, 200px); */transform: translateX(100px);transform: translateY(100px);
/*一个意思*/
如果后面跟百分数的意思是移动盒子自身x/y方向长度的百分比,可以用作子绝父相控制盒子水平居中垂直居中
translate里的xy值是相对于自身的初始位置的位移(而不是相对前一次位置的位移)
使用这种方式移动盒子的优点是不影响其他盒子(不占用位置的相对定位)
行内元素不适用translate
旋转
旋转的风扇
通过旋转制作下拉标识:
<!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>.qqq {width: 200px;height: 30px;background-color: aqua;position: relative;}.www {position: absolute;top: 8px;right: 15px;width: 10px;height: 10px;border-bottom: 1px solid #000;border-right: 1px solid #000;transform: rotate(45deg);}</style>
</head><body><div class="qqq"><div class="www"></div></div></body></html>
改变旋转中心点
transform-origin:x y;
x和y用空格隔开,xy默认转换中心点的元素是50% 50%
也可以给xy设置方位名词(left bottom top right center)
一个旋转小动画的demo
<!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>div {margin-top: 300px;text-align: center;}.iii {overflow: hidden;width: 200px;height: 200px;border: 1px solid pink;/* background-color: aqua; */margin: 100px auto;}.iii::before {display: block;content: 'epi';width: 100%;height: 100%;background-color: blueviolet;transform: rotate(180deg);transform-origin: left bottom;transition: all .4s;}.iii:hover::before {transform: rotate(0deg);}</style>
</head><body><div class="iii"></div></body></html>
缩放
transform:scale(x,y);
xy之间有逗号
transform:scale(1,1);:宽高都放大一倍,等于没有放大
transform:scale(2,2);都放大两倍
transform:scale(2);都放大两倍
transform:scale(0.5,0.5);都缩小二分之一
最大的优点:可以设置转换最新缩放,默认以中心点缩放,且不影响其他盒子
数字不跟单位,负数会反向再放缩
优势:之前学的修改宽高是以top边为依据向下进行缩放
scale()可以自己设置缩放中心缩放,更适合一些自然的动画效果,不会影响其他盒子
这种动画效果也是有简写的
transform:translate() rotate()scale()...;
简写的顺序是会影响动画的效果的(如果写了translation的话)当我们同时具有位移和其他属性的时候,一定要先写位移
动画
动画的实现方式类似于函数的调用,需要你先写一个动画效果,再让目标对象调用这个函数,就可以实现动画效果
实现一加载页面,就出现的动画效果
<!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>@keyframes move {0% {transform: translateX(0px);}100% {transform: translateX(1000px);}}div {width: 400px;height: 400px;background-color: aqua;animation-name: move;animation-duration: 1s;}</style>
</head><body><div></div>
</body></html>
from to可以实现和0%、100%一样的效果
@keyframes move {from{transform: translateX(0px);}to {transform: translateX(1000px);}}
0%和100%表示动画的开头和结尾,也设置不同的百分数表示时间不同动画的不同阶段
<!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>@keyframes move {0% {transform: translate(0px);}25% {transform: translate(1000px, 0);}50% {transform: translate(1000px, 500px);}75% {transform: translate(0, 500PX);}100% {transform: translate(0px);}}div {margin: 20px 20px;width: 100px;height: 100px;background-color: aqua;animation-name: move;animation-duration: 10s;}</style>
</head><body><div></div>
</body></html>
实现一个小方块10s内环绕了一周的效果
动画的常用属性
鼠标经过盒子,动画效果暂停,拿开又恢复
<!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>@keyframes move {0% {transform: translate(0px);}25% {transform: translate(1000px, 0);}100% {transform: translate(1000px, 500px);}}div {margin: 20px 20px;width: 100px;height: 100px;background-color: aqua;animation-name: move;animation-duration: 10s;animation-fill-mode: forwards;}div:hover {animation-play-state: paused;}</style>
</head><body><div></div>
</body></html>
简写:
vscode里提供了当你忘记简写顺序的提示:
可以按这个写
animation: name duration timing-function delay iteration-count direction fill-mode;
前面两个属性是必写属性(名字和时间)
速度曲线值:
linear匀速
ease默认,低速开始加快再变慢
ease-in以低速开始
ease-out以低速结束
ease-in-out以低速开始和结束
steps指定了时间函数的间隔数量(步长)
steps可以决定分几步来完成动画
一个眼泛粉光的呆猫
<!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>.momo {position: relative;width: 1200px;height: 1200px;background: url(/初识css/微信图片_20241125113021.jpg) no-repeat;margin: 0 auto;}.eye {position: absolute;top: 430px;left: 360px;color: cyan;}.dotted {width: 10px;height: 10px;background-color: #ff9cc2;border-radius: 50%;}.eye2 {position: absolute;top: 435px;left: 500px;}.eye div[class^="pulse"] {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 10px;height: 10px;box-shadow: 0 0 12px #ff9cc2;border-radius: 50%;animation: pulse 1.2s linear infinite;}.eye div.pulse2 {animation-delay: 0.4s;}.eye div.pulse3 {animation-delay: 0.8s;}@keyframes pulse {0% {}70% {width: 40px;height: 40px;opacity: 1;}100% {width: 70px;height: 70px;opacity: 0;}} </style>
</head><body><div class="momo"><div class="eye"><div class="dotted"></div><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div></div><div class="eye eye2"><div class="dotted"></div><div class="pulse1"></div><div class="pulse2"></div><div class="pulse3"></div></div></div></body></html>
给元素添加多个动画
<!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 {position: relative;background-color: #ccc;}.bear {z-index: 3;position: absolute;top: 200px;width: 200px;height: 100px;background: url(bear.png) no-repeat;animation: bear 1s steps(8) infinite, move 3s forwards;}@keyframes bear {0% {background-position: 0 0;}100% {background-position: -1600px 0;}}@keyframes move {0% {left: 0;}100% {left: 50%;transform: translateX(-50%);}}.bg {width: 100%;position: relative;height: 336px;overflow: hidden;}.bg1,.bg2 {width: 100%;position: absolute;height: 336px;animation: bg 2s steps(8) infinite;}.bg1 {z-index: 2;background: url(bg1.png) no-repeat;}.bg2 {z-index: 1;background: url(bg2.png) no-repeat;}@keyframes bg {0% {background-position: 0 0;}100% {background-position: -1240px 0;}}</style>
</head><body><div class="bear"></div><div class="bg"><div class="bg2"></div><div class="bg1"></div></div></body></html>
3d转换
translform:translateX(100px):仅仅是在x轴上移动
translform:translateY(100px):仅仅是在y轴上移动
translform:translateZ(100px):仅仅是在z轴上移动
translform:translate3d(x,y,z):xyz分别指要移动的轴的方向和距离
z一般用像素控制,xy可以用百分比
3d转换常和透视结合
透视
透视(视距)的单位是像素
透视写到被观察元素的父盒子里面
也就是现实里一个东西在眼睛里的视觉效果在css里是靠teanslformZ+perspective结合形成的
z实现了真正的移动,透视实现了视觉的移动
3d旋转
translform:rotate(45deg):沿着x轴正方向旋转45度
translform:rotate(45deg):沿着y轴正方向旋转45度
translform:rotate(45deg):沿着z轴正方向旋转45度
translform:rotate(x,y,z。deg):沿着自定义的轴旋转(了解)
实现沿x轴旋转
<!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: 500px;}.toushi {width: 200px;height: 200px;background-color: aquamarine;transition: all 1s;}.toushi:hover{transform:rotateX(180deg);}</style>
</head><body><div class="toushi">杀杀杀杀杀杀杀杀杀杀杀杀杀杀杀</div>
</body></html>
沿x轴,垂直屏幕向里是正方向,垂直屏幕向外是反方向
沿y轴旋转,正转是垂直屏幕向里,反转是向外
沿z轴,正转顺时针,反转逆时针
(分别是xyz)
3d呈现
保证盒子套盒子的时候,仍然可以实现3d效果
transform-style:preserve-3d;//子元素开启立体空间
代码写给父级,影响的是子盒子
<!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: 500px;}.box:hover {transform: rotateY(60deg);}.box {transform-style: preserve-3d;position: relative;width: 200px;height: 200px;margin: 100px auto;}.box div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: pink;}.box div:last-child {background-color: aqua;transform: rotateX(60deg);}</style>
</head><body><div class="box"><div></div><div></div></div>
</body></html>
结合写一下
<!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: 1000px;}section {position: relative;width: 216px;height: 216px;margin: 100px auto;transform-style: preserve-3d;animation: move 10s linear infinite;}section div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../初识css/微信图片_20241125113021.jpg) no-repeat;background-size: contain;}@keyframes move {0% {transform: rotateY(0deg);}100% {transform: rotateY(360deg);}}section div:nth-child(1) {transform: translateZ(300px);}section div:nth-child(2) {transform: rotateY(60deg) translateZ(300px);}section div:nth-child(3) {transform: rotateY(-60deg) translateZ(300px);}section div:nth-child(4) {transform: rotateY(120deg) translateZ(300px);}section div:nth-child(5) {transform: rotateY(-120deg) translateZ(300px);}section div:nth-child(6) {transform: rotateY(-180deg) translateZ(300px);}</style>
</head><body><section><div></div><div></div><div></div><div></div><div></div><div></div></section></body></html>
浏览器私有前缀
-moz-,firefox浏览器的私有属性
-ms-,ie浏览器的私有属性
-webkit-代表safari、chrome私有属性
-o-代表oprea私有属性
相关文章:

css:转换
转换 移动 /* transform: translate(100px, 200px); */transform: translateX(100px);transform: translateY(100px); /*一个意思*/ 如果后面跟百分数的意思是移动盒子自身x/y方向长度的百分比,可以用作子绝父相控制盒子水平居中垂直居中 translate里的xy值是相对…...
状态管理与存储:Vuex 和 sessionStorage
1. sessionStorage 存储位置 sessionStorage 是浏览器提供的 Web Storage API 的一部分,用于在一个会话期间存储数据。数据保存在浏览器的 内存 中,而不是在硬盘上,且其生命周期仅限于当前浏览器标签页。数据在浏览器窗口或标签页关闭时会被…...
Redis和MySQL保持一致性的延迟双删(Delay Double Delete)策略
Redis和MySQL保持一致性的延迟双删(Delay Double Delete)策略,是一种在数据更新或删除时为了保证数据一致性而采取的方法。以下是延迟双删的过程和原理的详细解释: 一、过程 第一次删除缓存: 当需要更新数据库中的数据…...

快速理解微服务中Fegin的概念
一.由来 1.在传统的架构里面,我们是通过使用RestTemplate来访问其他的服务,但是这种方式就存在了一个很大的缺陷,也就是被调用方如果发生了服务的迁移(IP和端口发生了变化),那么调用方也需要同步的在代码里面进行修改,…...

新增工作台模块,任务中心支持一键重跑,MeterSphere开源持续测试工具v3.5版本发布
2024年11月28日,MeterSphere开源持续测试工具正式发布v3.5版本。 在这一版本中,MeterSphere新增工作台模块,工作台可以统一汇总系统数据,提升测试数据的可视化程度并增强对数据的分析能力,为管理者提供测试工作的全局…...

快速搭建一个博客!!!“Halo框架深度优化:搭建你的个性化博客或网站”
目录 引言: 一. 首先服务器上去下载一个docker 1.可以参考官方地址: 2. 通过宝塔来一键安装!!! 3.也可以自己下载!!! 1.卸载旧版 2.配置Docker的yum库 3.安装Docker 4.启动和…...

009 STM32 HAL库介绍
STM32 HAL库(Hardware Abstraction Layer)是STMicroelectronics为STM32系列微控制器提供的一套硬件抽象层库,它旨在简化STM32的开发过程,提高代码的可移植性和可维护性。HAL库通过提供一组统一的API接口,使得开发者无需…...

【微服务】 Eureka和Ribbon
一、Eureka 服务调用出现的问题:在远程调用另一个服务时,我们采用的解决办法是发送一次http请求,每次环境的变更会产生新的地址,所以采用硬编码会出现很多麻烦,并且为了应对并发问题,采用分布式部署&#…...

6.算法移植第六篇 YOLOV5/rknn生成可执行文件部署在RK3568上
接上一篇文章best-sim.rknn模型生成好后,我们要将其转换成可执行文件运行在RK3568上,这一步需要在rknpu上进行,在强调一遍!!rknpu的作用是可以直接生成在开发板上运行的程序 退出上一步的docker环境 exit1.复制best-…...

element的el-table表格标题用css自定义是否必填,用添加伪类的方式标红色*
element的el-table表格标题用css自定义是否必填添加伪类红色 * 效果图如下👇 el-table组件的html部分 css部分 /deep/.el-table__header-wrapper{.el-table__header{.has-gutter tr .el-table__cell:nth-of-type(3) .cell:before{content: *;color:red}.has-gutte…...
数据仓库: 8- 数据仓库性能优化
CSDN 目录展示 目录 8- 数据仓库性能优化8.1 查询优化8.1.1 索引优化8.1.2 分区和分桶8.1.3 使用缓存8.1.4 查询简化与重写8.1.5 聚合优化8.1.6 并行化和分布式计算8.1.7 基于列存储的优化8.1.8 表的分区和数据清洗8.1.9 查询提示 (Hints)8.1.10 自动调优工具 8.2 索引设计8.2…...
可编程网络在分布式深度学习通信瓶颈控制中的应用与未来展望
目录 可编程网络在分布式深度学习通信瓶颈控制中的应用与未来展望 可编程网络在分布式深度学习通信瓶颈控制中的应用与未来展望 在分布式深度学习领域,随着模型规模的不断扩大,训练过程中的通信开销已成为制约性能提升的关键因素。传统的分布式训练方法面临高通信延迟和带宽…...

【论文笔记】Tool Learning with Foundation Models 论文笔记
Tool Learning with Foundation Models 论文笔记 文章目录 Tool Learning with Foundation Models 论文笔记摘要背景:工作: 引言工具学习的发展本文工作(大纲&目录) 背景2.1 工具使用的认知起源2.2 工具分类:用户界…...
Springfox迁移到 Springdoc OpenAPI 3
将项目从 Springfox 迁移到 Springdoc OpenAPI 3 时,主要的工作是将原先使用的 Springfox 注解替换为 Springdoc OpenAPI 3 中的对应注解。虽然 Springdoc OpenAPI 3 基于 OpenAPI 3 规范,并且有一些不同的命名方式和设计理念,但大部分注解的…...

DIY-Tomcat part 3 实现对动态资源的请求
实现ServletRequest package connector;import javax.servlet.RequestDispatcher; import javax.servlet.ServletInputStream; import javax.servlet.ServletRequest; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.i…...
3.10 内核 BUG_ON() at xfs_vm_writepage() -> page_buffers()
目录 前言 问题分析 page buffers创建 page buffers丢失 Write-Protect Dirty Page w/o Buffers 问题解决 前言 这个问题发生在3.10.0-514.el7上,并且在RHEL的知识库中快速找到了对应的案例以及解决方案,但是,理解问题如何发生和解决…...

CrystalDiskInfo:硬盘健康监测工具简介和下载
原论坛给你更好的阅读体验:CrystalDiskInfo:硬盘健康监测工具简介和下载 | 波波论坛 引言 在日常使用电脑时,硬盘的健康状态对于系统的稳定性和数据的安全性至关重要。硬盘出现故障可能会导致数据丢失,严重时甚至会使整个系统无…...

Flink cdc同步增量数据timestamp字段相差八小时(分析|解决)不是粘贴复制的!
问题 我使用flink cdc同步mysql到mysql遇到了timestamp字段缺少八小时的问题。很少无语,flink ,cdc,debezium时区都设置了,没有任何效果! 分析 问题出现在mysql binlog身上!!! 因为默认mysql会使用UTC来…...

【docker】9. 镜像操作与实战
镜像操作案例 查找镜像 docker search busybox下载镜像 docker pull busybox:1.36.0查看镜像及列表存储位置 rootLAPTOP-H2EI4I6A:~# docker images busybox REPOSITORY TAG IMAGE ID CREATED SIZE busybox latest 517b897a6a83 2 months a…...
js-显示转换(强制转换)与隐式转换,==与===区别
1.显示转换(强制转换)与隐式转换 1.1显示转换 常见的JavaScript强制转换示例。 (1) 一元加号、一元减号- 值是布尔值,true将被转换为1,false将被转换为0。 let a "123"; let b a; // b的值为123,类型为Nu…...

label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
rknn优化教程(二)
文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK,开始写第二篇的内容了。这篇博客主要能写一下: 如何给一些三方库按照xmake方式进行封装,供调用如何按…...

【Oracle APEX开发小技巧12】
有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由:大部分的转换软件需要收费,要么功能不齐全,而开会员又用不了几次浪费钱,借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中,如工厂高危作业区、医院手术室、公共场景等,人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式,存在效率低、覆盖面不足、判断主观性强等问题,难以满足对人员打手机行为精…...
OD 算法题 B卷【正整数到Excel编号之间的转换】
文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的:a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

客户案例 | 短视频点播企业海外视频加速与成本优化:MediaPackage+Cloudfront 技术重构实践
01技术背景与业务挑战 某短视频点播企业深耕国内用户市场,但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大,传统架构已较难满足当前企业发展的需求,企业面临着三重挑战: ① 业务:国内用户访问海外服…...

Linux-进程间的通信
1、IPC: Inter Process Communication(进程间通信): 由于每个进程在操作系统中有独立的地址空间,它们不能像线程那样直接访问彼此的内存,所以必须通过某种方式进行通信。 常见的 IPC 方式包括&#…...
C++.OpenGL (9/64)摄像机(Camera)
颜色(Color) 颜色理论在OpenGL中的应用 #mermaid-svg-dKNDfS4EKDUmG4Ts {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-dKNDfS4EKDUmG4Ts .error-icon{fill:#552222;}#mermaid-svg-dKNDfS4EKDUmG4Ts .error-text…...