2D与动画

最新推荐文章于 2024-08-28 13:50:33 发布

土土呦三号

最新推荐文章于 2024-08-28 13:50:33 发布

阅读量713

点赞数 13

文章标签： html 前端

本文链接：https://blog.csdn.net/2302_80241604/article/details/137133930

版权

本文详细介绍了CSS2D转换中的关键特性，如移动（translate）、旋转（rotate）、缩放（scale），以及如何设置转换中心点和动画效果。通过实例演示了如何运用这些技术实现元素的定位和动态变换。

摘要由CSDN通过智能技术生成

2D转换

1.移动 translate

1. 语法

transform: translate(x,y); 或者分开写

transform: translateX(n);

transform: translateY(n);

2.重点

定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素

translate最大的优点：不会影响到其他元素的位置

translate中的百分比单位是相对于自身元素的 translate:(50%,50%);

对行内标签没有效果

例子：使一个盒子水平垂直居中

<!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 {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: blue;
        
        }
        p {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
background-color: pink;
transform: translate(-50%,-50%);


        }
    </style>
</head>
<body>
   <div>
    <P></P>
   </div>
</body>
</html>

2.旋转 rotate

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。

1. 语法

transform:rotate( 度数 )

2. 重点



rotate里面跟度数，单位是 deg 比如 rotate(45deg)



角度为正时，顺时针，负时，为逆时针



默认旋转的中心点是元素的中心点

例子：三角

<!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 {
    position: relative;
    width: 249px;
    height: 35px;
    border: 1px solid #000;
   }
   div::after{
    content: "";
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-right:1px solid #000 ;
border-bottom:1px solid #000 ;
transform: rotate(45deg);
transform: all 0.2s;
   }
   div:hover::after {
    transform: rotate(225deg);
   }


   
   
   </style>
</head>
<body>
    <div></div>
</body>
</html>

鼠标一放由此

变成

3.转换中心点 transform-origin

我们可以设置元素转换的中心点

1. 语法

transform-origin: x y;

2. 重点



注意后面的参数 x 和 y 用空格隔开



x y 默认转换的中心点是元素的中心点 (50% 50%)



还可以给x y 设置像素或者方位名词（top bottom left right center）

案例：

<!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 {
            overflow: hidden;
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            margin: 10px;
            float: left;
        }
        div::before {
            content: "回村的诱惑";
            display: block;
            width: 200px;height: 200px;
            background-color: hotpink;
            transform: rotate(180deg);
            transform-origin: left bottom;
            transition: all 0.2s;

        }
        div:hover::before {
            transform: rotate(0deg);
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

屏幕录制 2024-03-29 103150

4.转换之缩放scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。

1. 语法

transform: scale( x,y);

2. 注意



注意其中的x和y用逗号分隔



transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大



transform:scale(2,2) ：宽和高都放大了2倍



transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)



transform:scale(0.5,0.5)：缩小



sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

分页案例：

<!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>
        ul li {
            float: left;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid red;
            border-radius: 50%;
            list-style: none;
            margin: 10px;
            cursor: pointer;
            transition: all 0.1s;
        }

        li:hover {
            transform: scale(1.3);
        }
    </style>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
</body>

</html>

5.2D 转换综合写法

注意：

1. 同时使用多个转换，其格式为：transform: translate() rotate() scale() ...等，

2. 其顺序会影转换的效果。（先旋转会改变坐标轴方向）

3. 当我们同时有位移和其他属性的时候，记得要将位移放到最前

动画

1.先定义动画

2.再使用（调用）动画

1. 用keyframes 定义动画（类似定义类选择器）

@keyframes 动画名称 {
 0%{
 width:100px;
 } 
 100%{
 width:200px;
 }
}

2. 元素使用动画

div {
 width: 200px;
 height: 200px;
 background-color: aqua;
 margin: 100px auto;
 /* 调用动画 */
 animation-name: 动画名称;
 /* 持续时间 */
 animation-duration: 持续时间;
 }

3.常用属性

4.简写属性

animation: myfirst 5s linear 2s infinite alternate;

animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;



简写属性里面不包含 animation-play-state



暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用



想要动画走回来，而不是直接跳回来：animation-direction ： alternate



盒子动画结束后，停在结束位置： animation-fill-mode ： forwards

animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;

step案例：

<!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 {
            overflow: hidden;
            font-size: 20px;
            width: 0;
            height: 30px;
            white-space: nowrap;
            background-color: skyblue;
            animation: o 4s steps(8) forwards;
        }
@keyframes o {
    0%{
        width: 0;
    }
    100% {
        width: 160px;
    }
}

    </style>
</head>
<body>
    <div>前途似海来日方长</div>
</body>
</html>

土土呦三号

关注

13
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
2D与动画

或者分开写定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素translate最大的优点：不会影响到其他元素的位置translate中的百分比单位是相对于自身元素的 translate:(50%,50%);对行内标签没有效果例子：使一个盒子水平垂直居中。
复制链接

扫一扫