css动画学习-平面转换

10块钱刮刮乐中20

已于 2023-11-03 09:51:43 修改

阅读量76

点赞数

分类专栏： css 动画文章标签： css 学习平面前端

于 2023-11-01 14:46:06 首次发布

本文链接：https://blog.csdn.net/qq_43598270/article/details/134144068

版权

css 动画专栏收录该内容

2 篇文章 0 订阅

订阅专栏

transition 属性介绍

初识

所有实例效果均由 transition 属性实现，它的属性值目前学习两个，代码：

transition: all 0.5s;

all ：表示监听所有属性值的变化，

0.5s：表示进行时间，可简写为 .5s

注意：transition 属性书写的位置为需要实现效果的父元素，例子看下面1.1

css实现：transform 属性

过渡状态需要通过 transform 属性，和其对应的值，对所需元素进行效果的实现

一、位移

位移，即在一个平面上按照X轴、Y轴进行移动

值：translate()

translate 值用来实现元素位移属性，（）内可以写一个参数，也可以写两个参数

/* 一个参数 */
transform: translate(-50%);

/* 两个参数 需用逗号分隔*/
transform: translate(-50%, -50%);

/* translate(30px, 90px) x轴位移+30px，y轴+90px */
/* transform: translate(30px, 90px);  */
/* 百分比：盒子自身的宽高 */
/* transform: translate(30%, 50%); */

例子1.1

css：

.box {
    width: 500px;
    height: 300px;
    margin: 100px auto;
    border: 1px solid #000;
    position: relative;
}

.box-item {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 谁过渡就给谁加 */
    transition: all 0.5s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* margin-top: -100px;
    margin-left: -100px; */
}

.box:hover .box-item {
    /* translate(30px, 90px) x轴位移+30px，y轴+90px */
    transform: translate(30px, 90px); 
    /* 百分比：盒子自身的宽高，这里30%表示 box-item的宽度的30%，即200px * 30%*/
    /* transform: translate(30%, 50%); */
}

HTML：

<div class="box">
    <div class="box-item"></div>
</div>

二、缩放

值：scale(1)

通过 scale() 实现旋转效果

一个参数表示 x轴 y轴等比缩放

两个参数：（x 轴缩放比例，y 轴缩放比例）

数值 1 表示原版

数值大于 1 表示放大

数值小于 1 表示缩小

2表示两倍

transform: scale(1.1);

例子2.1

.box{
    width: 300px;
    height: 210px;
    margin: 100px auto;
    background-color: pink;
    
}

.box img{
    width: 100%;
    transition: all 0.5s;
}

.box:hover img{
    /* scale 实现旋转效果 */
    /* 一个数表示x轴y轴等比缩放 */
    /* 两个数 （x 轴缩放比例，y 轴缩放比例） */
    /* 数值 1 表示原版*/
    /* 数值大于 1 表示放大 */
    /* 数值小于 1 表示缩小 */
    /* 2表示两倍 */
    transform: scale(1.1);
}

<div class="box">
    <img src="./images/一张图片.jpg" alt="">
</div>

效果：

三、旋转

值：rotate(0deg)

deg：旋转用到的属性，值为一圈，deg是度的意思，可为负数

取值为正, 则顺时针旋转

取值为负, 则逆时针旋转

属性：transform-origin

默认原点是盒子中心，transform-origin 用来改变转换的原点

transform-origin：(原点水平位置，原点垂直位置)

参数取值：top \ left \ right \ bottom \ center，或像素单位，或百分比（参照盒子自身尺寸计算）

写法：

transform-origin: right bottom; // 以盒子右下为原点（中心点）

transform-origin: left bottom; // 以盒子左下为原点（中心点）

例子3.1

img{
    width: 250px;
    transition: all 2s;
}
img:hover{
    /* rotate：旋转用到的属性，值为一圈，deg是度的意思，可为负数 */
    /* 取值为正, 则顺时针旋转 */
    /* 取值为负, 则逆时针旋转 */
    transform: rotate(30deg);
}

<body>
    <img src="./images/一张图片.png">
</body>

效果：

多重转换 -- 位移、缩放、旋转多个效果同时实现

写法：transform: translate(600px) rotate(360deg);

以上是位移属性和旋转同时触发，translate 和 rotate 的参数都遵循原本的规则

例子：4.1

.box{
    width: 800px;
    height: 200px;
    margin: 100px auto;
    border: 1px solid #000;
}

img{
    width: 200px;
    transition: all 4s;
}

.box:hover img{
    transform: translate(600px) rotate(360deg);
}

<div class="box">
    <img src="./images/一张图片.png" alt="">
</div>

效果：

注意：位移随着方向轴而改变，旋转会改变网页元素的坐标轴向，先写旋转，则后面的转换效果的轴向以旋转后的轴向为准


    /* 位移随着方向轴而改变 */
    /* 旋转会改变网页元素的坐标轴向 */
    /* 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准 */
    transform: rotate(360deg) translate(600px);

效果：

结束语

当我们在人生的旅途中不断前行，深思熟虑，经历起伏，我们才能逐渐领悟到，生命的真正意义在于勇敢追寻内心的光芒，不断超越自己，绽放自己独特的花朵。不论前路多艰，坚持走下去，因为每一步都是成长，每一次经历都是财富。愿我们都能在生命的征途上，坚持信念，追求梦想，活出自己独特的精彩。