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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/925978.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloud2~~~

Nacos Nacos就是替代 注册中心【Eureka】 和 配置中心【Config】 支持AP和CP&#xff0c;可以切换 了解即可 下载和运行 下载版本&#xff08;找自己想要的版本&#xff09;&#xff1a;Tags alibaba/nacos GitHub 本地有良好的 Java8 Maven环境 解压安装包&#xff0c;直接…

从0开始学PHP面向对象内容之常用设计模式(享元)

二、结构型设计模式 7、享元模式&#xff08;Flyweight Pattern&#xff09; 这里是引用享元模式&#xff08;Flyweight Pattern&#xff09; 是一种结构型设计模式&#xff0c;旨在通过共享对象来减少内存使用&#xff0c;尤其适用于大量相似对象的场景。通过共享和重用对象的…

AI开发 - GPT之魂 用Python 演示chatGPT的自注意力机制 - 机器学习

自注意力机制&#xff08;Self-Attention&#xff09;就是让模型在处理每个词时&#xff0c;学会“关注重点”&#xff0c;而不是平均地对每个词一视同仁。这种机制让 GPT 能更聪明地理解句子的上下文和语义之间的关系。 自注意力机制是 GPT 的核心&#xff0c;它帮助模型在理解…

循环神经网络(RNN)简述

RNN及其变体 1、概述 (一)、概念 RNN(Recurrent Neural Network), 中文称作循环神经网络, 它一般以序列数据为输入, 通过网络内部的结构设计有效捕捉序列之间的关系特征, 一般也是以序列形式进行输出。 RNN的循环机制使模型隐层**上一时间步产生的结果, 能够作为当下时间步…

计算机毕业设计Python+LSTM天气预测系统 AI大模型问答 vue.js 可视化大屏 机器学习 深度学习 Hadoop Spark

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

Next.js-样式处理

#题引&#xff1a;我认为跟着官方文档学习不会走歪路 Next.js 支持多种为应用程序添加样式的方法&#xff0c;包括&#xff1a; CSS Modules&#xff1a;创建局部作用域的 CSS 类&#xff0c;避免命名冲突并提高可维护性。全局 CSS&#xff1a;使用简单&#xff0c;对于有传统…

QT:多ui界面显示

文章目录 1.多ui界面添加2.跳转函数3.返回函数4.Qt5源码工程5.模态显示 1.多ui界面添加 最终生成这个目录 2.跳转函数 void MainWindow::on_pushButton_clicked() {//this->setWindowModality(Qt::WindowModal);test1 *t1 new test1();t1->setParentData(this);this-…

利用大数据和人工智能彻底改变移动测试

移动应用程序是按需提供的公司品牌。它是了解组织提供的任何服务或产品的窗口。在 Kobiton&#xff0c;他们明白这一点 — 他们的使命是通过测试改进移动应用程序。Kobiton 是一个移动测试平台&#xff0c;允许客户在世界任何地方对真实移动设备执行手动和自动测试。它最初是一…

Ubuntu环境中RocketMQ安装教程

参考教程 https://blog.csdn.net/weixin_56219549/article/details/126143231 1、安装JDK&#xff0c;并配置环境变量&#xff08;略&#xff09; 2、下载RocketMQ安装包 RocketMQ下载地址&#xff0c;选择二进制包下载 unzip rocketmq-all-5.0.0-ALPHA-bin-release.zip 使…

基于JAVA的旅游网站系统设计

摘 要 自改革开放以来&#xff0c; 我国国内旅游业发展迅速&#xff0c;覆盖面广&#xff0c;但总的来说仍然处于一种低消费、大众化、低水平、 中近距离旅游的状况。旅游基础设备、服务设施建设发展很快&#xff0c;但仍然不能适应国内旅游发展速度的要求。我国的 旅游业是在…

服务器数据恢复—raid6阵列硬盘被误重组为raid5阵列的数据恢复案例

服务器存储数据恢复环境&#xff1a; 存储中有一组由12块硬盘组建的RAID6阵列&#xff0c;上层linux操作系统EXT3文件系统&#xff0c;该存储划分3个LUN。 服务器存储故障&分析&#xff1a; 存储中RAID6阵列不可用。为了抢救数据&#xff0c;运维人员使用原始RAID中的部分…

论文笔记-WWW2024-ClickPrompt

论文笔记-WWW2024-ClickPrompt: CTR Models are Strong Prompt Generators for Adapting Language Models to CTR Prediction ClickPrompt: CTR模型是大模型适配CTR预测任务的强大提示生成器摘要1.引言2.预备知识2.1传统CTR预测2.2基于PLM的CTR预测 3.方法3.1概述3.2模态转换3.…

循环神经网络(RNN)详解

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

【微服务】Nacos

一、安装 1、官网地址&#xff1a;https://nacos.io/download/nacos-server/ 2、启动&#xff1a;找到bin目录下的startup.cmd双击启动&#xff0c;或者打开一个命令窗口输入&#xff1a; startup.cmd -m standalone双击启动后如下&#xff1a;可以访问控制台地址 访问后的…

混沌工程/混沌测试/云原生测试/云平台测试

背景 私有云/公有云/混合云等具有复杂&#xff0c;分布式&#xff0c;环境多样性等特点&#xff0c;许多特殊场景引发的线上问题很难被有效发现。所以需要引入混沌工程&#xff0c;建立对系统抵御生产环境中失控条件的能力以及信心&#xff0c;提高系统面对未知风险得能力。 …

DM-VIO(ROS)+t265配置运行记录(ubuntu18.04+ros melodic)

在工作中需要对DM-VIO算法进行测试&#xff0c;于是配置并记录了一下&#xff1a; 首先运行ros接口的dm-vio&#xff0c;一定要先配置源码 https://github.com/lukasvst/dm-vio在这个网址把源码下载下来并解压&#xff0c;并安装一下依赖&#xff1a; sudo apt-get install …

自动化运维(k8s)之微服务信息自动抓取:namespaceName、deploymentName等全解析

前言&#xff1a;公司云原生k8s二开工程师发了一串通用性命令用来查询以下数值&#xff0c;我想着能不能将这命令写成一个自动化脚本。 起初设计的 版本一&#xff1a;开头加一条环境变量&#xff0c;执行脚本后&#xff0c;提示输入&#xff1a;需要查询的命名空间&#xff0c…

【数据分析】布朗运动(维纳过程)

文章目录 一、概述二、数学布朗运动2.1 数学定义2.2 布朗运动的数学模型2.21 标准布朗运动2.22 布朗运动的路径2.23 布朗运动的方程 三、布朗运动在金融学中的应用四、数学构造&#xff08;以傅里叶级数为例&#xff09;4.1 傅里叶级数的基本思想4.2 构造布朗运动 一、概述 布…

Mybatis Plus 增删改查方法(一、增)

先定义一个简单的测试表&#xff0c;执行脚本如下&#xff1a; create table user(id bigint primary key auto_increment,name varchar(255) not null,age int not null default 0 check (age > 0) ); 根据Spingbootmybatisplus的结构根据表自行构建结构&#xff0c;大致…

基于Matlab的图像去噪算法仿真(二)

在信息化的社会里&#xff0c;图像在信息传播中所起的作用越来越大。所以&#xff0c;消除在图像采集和传输过程中而产生的噪声&#xff0c;保证图像受污染度最小&#xff0c;成了数字图像处理领域里的重要部分。 本文主要研究分析邻域平均法、中值滤波法、维纳滤波法及模糊小…