css:转换

ops/2024/11/27 10:53:33/

转换

移动

 /* 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私有属性


http://www.ppmy.cn/ops/137056.html

相关文章

Perforce SAST专家详解：自动驾驶汽车的安全与技术挑战，Klocwork、Helix QAC等静态代码分析成必备合规性工具

Perforce SAST专家详解：自动驾驶汽车的安全与技术挑战，Klocwork、Helix QAC等静态代码分析成必备合规性工具

自动驾驶汽车安全吗&#xff1f;现代汽车的软件包含1亿多行代码&#xff0c;支持许多不同的功能&#xff0c;如巡航控制、速度辅助和泊车摄像头。而且&#xff0c;这些嵌入式系统中的代码只会越来越复杂。 随着未来汽车的互联程度越来越高&#xff0c;这一趋势还将继续。汽车越…
阅读更多...
AdaPipe:动态规划解决显存和GPU在LLM计算中出现气泡问题

AdaPipe:动态规划解决显存和GPU在LLM计算中出现气泡问题

目录 AdaPipe:动态规划解决显存和GPU在LLM计算中出现气泡问题 0-5表示不同数据 大的方块表示：管道，便于理解了想成GPU 黄色方块表示显存 Stage表示Attention和FFN layer（Projection和MLP） 重计算和分区策略：细化了Attention和FFN layer Transformer中的管道 AdaPi…
阅读更多...
鸿蒙动画开发07——粒子动画

鸿蒙动画开发07——粒子动画

1、概 述 粒子动画是在一定范围内随机生成的大量粒子产生运动而组成的动画。 动画元素是一个个粒子&#xff0c;这些粒子可以是圆点、图片。我们可以通过对粒子在颜色、透明度、大小、速度、加速度、自旋角度等维度变化做动画&#xff0c;来营造一种氛围感&#xff0c;比如下…
阅读更多...
【算法】欧几里得与拓展欧几里得算法

【算法】欧几里得与拓展欧几里得算法

目录 一、欧几里得算法 二、拓展欧几里得算法 2.1 裴蜀定理 2.2 拓展欧几里得算法 2.3 例题 三、线性同余方程 3.1 概念 3.2 例题 一、欧几里得算法 欧几里得算法又称辗转相除法&#xff0c;可用于求解两个数的最大公约数 其思路&#xff1a; gcd(a, b) gcd(b, a%b…
阅读更多...
241126学习日志——[CSDIY] [ByteDance] 后端训练营 [19]

241126学习日志——[CSDIY] [ByteDance] 后端训练营 [19]

CSDIY&#xff1a;这是一个非科班学生的努力之路&#xff0c;从今天开始这个系列会长期更新&#xff0c;&#xff08;最好做到日更&#xff09;&#xff0c;我会慢慢把自己目前对CS的努力逐一上传&#xff0c;帮助那些和我一样有着梦想的玩家取得胜利&#xff01;&#xff01;&…
阅读更多...
Deepnote、JupyterLab、Google Colab、Amazon SageMaker、VS Code对比

Deepnote、JupyterLab、Google Colab、Amazon SageMaker、VS Code对比

功能比较 平台语言支持扩展性数据连接可视化能力DeepnotePython、R、SQL中等&#xff0c;依赖云端支持主要云平台&#xff08;BigQuery、Snowflake等&#xff09;内置仪表盘与交互图表JupyterLab多种语言&#xff0c;插件支持广泛极高&#xff0c;完全可自定义使用库&#xff…
阅读更多...
【C++】list模拟实现（完结）

【C++】list模拟实现（完结）

1.普通迭代器&#xff08;补充&#xff09; 1.1 后置和后置-- 我们迭代器里面实现了前置和前置--&#xff0c;还需要实现后置和后置--。 在list.h文件的list_iterator类里面实现。 //后置/-- Self& operator(int) {Self tem(*this);//保存原来的值_node _node->_nex…
阅读更多...
111.有效数字

111.有效数字

class Solution {public boolean isValid(String word) {if(word.length()<3){return false;}int countV0,countC0;//分别统计原音和辅音for(int i0;i<word.length();i){if(Character.isLetterOrDigit(word.charAt(i))){if(word.charAt(i)a||word.charAt(i)e||word.charA…
阅读更多...
最新文章

Copyright @ 2022~2023