css3--2D转换(移动、旋转、缩放)，动画

PiaohuiEr

已于 2022-04-04 15:36:29 修改

阅读量697

点赞数

分类专栏： css3 css 文章标签： css3

于 2022-04-03 21:43:02 首次发布

原文链接：https://www.bilibili.com/video/BV14J4114768?p=373

版权

css 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

css3

6 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的2D转换，包括移动、旋转、缩放以及如何设置旋转中心和简写形式。同时，文章讲解了CSS动画的基础用法，如定义动画、调用动画、动画序列和关键帧动画，通过实例展示了小熊奔跑的动画效果。

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

1、2D转换

在这里插入图片描述

1.1. 移动

移动盒子：position定位、margin外边距、translate2D转换。 translate对行内元素没作用。
在这里插入图片描述

1.2. 旋转

在这里插入图片描述

1.3. 旋转中心

注意：参数使用空格隔开
在这里插入图片描述

代码

在这里插入图片描述

1.4. 盒子旋转案例

鼠标经过‘传媒盒子’出现旋转效果
在这里插入图片描述

代码

在这里插入图片描述

1.5. 缩放scale

注意：参数使用 "，" 隔开
相对于直接更改高宽，具有3个优点：1、向四周缩放。2、不影响其他盒子。3、可以设置缩放参考点。 在这里插入图片描述

图片放大案例

鼠标经过图片放大,不超出父盒子范围（设置overflow=hidden）

代码

在这里插入图片

1.6. 简写

在这里插入图片描述

1.7. 总结

在这里插入图片描述

2、动画

2.1. 基本使用

（1）定义动画

在这里插入图片描述

（2）调用动画

在这里插入图片描述

2.2. 动画序列

在这里插入图片描述

2.3. 动画属性

animation-play-state 一般搭配鼠标经过:hover使用

（1）常用属性

在这里插入图片描述

（2）速度曲线细节

在这里插入图片描述

（3）属性简写

在这里插入图片描述

*小熊奔跑案例

效果图
在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
        }
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(./imags/bear.png) no-repeat blue;
            animation: identifier 1s steps(8) infinite, div_move 1s forwards;
        }
        @keyframes identifier {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        @keyframes div_move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                transform: translateX(-50%);
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>