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

css:转换

article 2024/11/27 17:46:17

转换

移动

 /* 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.kler.cn/a/411658.html

相关文章：

  • 网上蛋糕售卖店管理系(Java+SpringBoot+MySQL)
  • 数据通信和网络
  • Vue-TreeSelect组件最下级隐藏No sub-options
  • QT QToolButton控件 全面详解
  • 极狐GitLab 17.6 正式发布几十项与 DevSecOps 相关的功能【五】
  • 计算机网络八股整理（一）
  • SQL优化笔记--explain看执行计划--主要还是看用了哪些索引，所以你是否失效--分库分表的注意事项（未完）
  • C#中面试的常见问题008
  • 列表代码思路
  • 前端技术选型之uniapp
  • MySQL中char和varchar的区别详解
  • JavaWeb——请求响应（5/8）-请求：日期参数json参数（使用场景及封装类型、接收方式、在 Postman 中传递、在服务端接收）
  • Spring框架使用xml方式配置ThreadPoolTaskExecutor线程池，并且自定义线程工厂
  • jdk17-LongAddr 类increment()方法注释说明
  • c++中的lambda表达式！
  • 【H2O2|全栈】JS进阶知识（十一）axios入门
  • ChatGPT如何辅助academic writing？
  • 学习路之linux--多php版本下指定php版本执行命令
  • 基于Java Springboot华为数码商城交易平台
  • 数据结构初阶---复杂度
  • 大模型的实践应用31-基于通义千问大模型改进台风和海浪预测研究，利用机器学习与通义千问结合的思路实现对台风和海浪预测分析
  • Mongo数据库 --- Mongo Pipeline
  • 量子安全与经典密码学：一些现实方面的讨论
  • 分布式在线评测系统
  • 【机器视觉 OCR】适合Python开发的OCR工具：深入解析与实战应用
  • Python学习34天