鸿蒙应用开发-第一章-渐变、过渡与平面转换

Tips：这个只是作者的学习笔记，仅作参考

目录

一.渐变

线性渐变

径向渐变

 二.过渡

 三.平面转换

      3.1 位移

        3.1.1 用法:

         3.1.2 绝对定位居中

3.1.3 位移缩放案例:

3.2 旋转

        旋转案例

  3.3 缩放

        缩放案例

3.4 空间转换

3.5 透视

3.6 空间旋转

3.7 立体呈现

立体呈现案例：3D导航

3.8 空间缩放

---

一.渐变

        使用场景:需要使用背景颜色发生渐变

        CSS定义了两种渐变类型:

                线性渐变:向下/向上/向左/向右/对角线

                径向渐变:(向其中心)

        属性:background 

线性渐变

        属性值:linear-gradient(颜色1,颜色2)

        上到下渐变(默认)

 background: linear-gradient(red,yellowgreen);

        从左到右渐变

/* 左到右渐变 加to right */
background: linear-gradient(to right,red,yellow);

         从下往上渐变

/* 下到上渐变 */
background: linear-gradient(to top,yellow,orange);

        从右到左渐变

 /* 右到左渐变 */
background: linear-gradient(to left,red,yellow);

        对角线渐变:

/* 左上到右下渐变 */
background: linear-gradient(to bottom right,red,yellow);
/* 右下到左上渐变 */
background: linear-gradient(to left top,purple,skyblue);
/* 右上到左下渐变 */
background: linear-gradient(to left bottom,orange,yellowgreen);
/* 左下到左上渐变 */
background: linear-gradient(to right top,black,white);

效果如下: 

 

        重复线性渐变:(百分比数字意味着该颜色占比)

background-image: repeating-linear-gradient(red 10%,yellow 15%,green 20%);

径向渐变

         径向渐变由其中心定义(也就是外面四周的颜色往里渐变)

         径向默认渐变:

/* 径向渐变 - radial */
background: radial-gradient(red,yellow,green);

        效果如下: 

         调整渐变颜色占比:

            /* 渐变颜色占比 */
            background: radial-gradient(red 5%,yellow 15%,green 20%);

         效果如下:

         调整渐变形状

            /* 圆形渐变 */
            background: radial-gradient(circle,red,yellow,green);

        效果如下:

         重复径向渐变:

            /* 重复径向渐变 */
            background-image: repeating-radial-gradient(red 10%,yellow 15%,green 20%  );

        效果如下:

 

 二.过渡

         作用:让元素的样式慢慢的变化,常配合hover使用,增强网页交互体验

        属性名:transition

        常见取值:

参数	取值
过渡的属性	all:所有能过渡的属性都过渡
过的的市场	数字＋s(秒)

         Tips:

        1.过渡需要:默认状态和hover状态样式不同,才有过渡效果

        2.transition属性给需要过度的元素本身加

        3.transition属性设置在不同状态中,效果不同的

                (1)给默认状态设置,鼠标移入移出都有过渡效果

                (2)给hover状态设置,鼠标移入有过渡效果,移出没有过渡效果 

transition-property	需要过渡的样式,默认是all
transition-duration	运动时间默认是0s ms毫秒
transition-delay	延迟时间默认是0 s
transition-timing-function	运动形式 默认是ease A. ease:慢速开始,然后变快,然后慢速结束 B. linear:匀速  ease-in:加速 C. case-out: 匀速 D. ease-in-out: 先加速后减速 E. cublic-bezier 贝塞尔曲线(x1,y1,x2,y2) F. http:cubic-bezier.com G. steps( ) 实现一个关键逐帧动画的功能

       代码案例: 

<style>
        div{
            width: 300px;
            height: 100px;
            background-color: pink;
            /* 过渡的属性 : 背景颜色 , 宽度 */
            transition-property: background-color,width;
            /* 过渡的时间 */
            transition-duration: 2s;
            /* 延迟时间 */
            /* transition-delay: 2s; */
            /* 运动轨迹 */
            /* linear - 匀速 */
            /* transition-timing-function: linear; */
            /* eaase - 中速 - 快 - 慢 */
            transition-timing-function: ease;
            /* ease - 加速 */
            transition-timing-function: ease-in;
            /* ease-out - 减速 */
            transition-timing-function: ease-out;
            /* ease-in-out - 慢-快-慢 */
            transition-timing-function: ease-in-out;
            /* steps - 逐帧 */
            /* transition-timing-function: steps(5); */

            /* 连写 */
            /* 同时有两个时间的时候,第一个代表运动执行的时间,
            第二个代表延迟时间,只有一个时间的时候代表运动执行时间 */
            /* 只有时间要按照指定顺序设置,其他属性值在哪都行 */
            /* all值会变化所有相关属性 */
            /* 过渡属性值 - 过渡完成时间 - 延迟(反应)时间 - 全部相关属性 - 匀速*/
            transition: 2s 0s all linear ;
        }
        div:hover{
            width: 600px;
            background-color: aquamarine;
        }

        p{
            width: 100px;
            height: 300px;
            background-color: orange;
            transition:2s all linear;
        }
        p:hover{
            height: 600px;
            background-color: yellowgreen;
        }
    </style>

 三.平面转换

        使用场景:需要使用transform实现元素的位移,旋转,缩放效果

        平面转换:改变盒子在平面内的形态(位移,旋转,缩放)   2D转换

        平面转换属性:transform

      3.1 位移

        3.1.1 用法:

                transform:translate(水平移动距离,垂直移动距离)

        取值(正负均可):

                像素单位数值

                百分比(参照物为盒子自身尺寸)

                Tips:X轴正向为右,Y轴正向为下

        技巧:translate()如果只给出一个值,则表示X轴方向移动距离

        单独设置某个方向移动距离:translateX() & translateY()

        示例代码:

            /* 位移 */
            /* 具体值 */
            /* 位移-左到右 */
            transform: translateX(100px);
            /* 位移-右到左 */
            transform: translateX(-50px);
            /* 上到下 */
            transform: translateY(100px);
            /* 下到上 */
            transform: translateY(-50px);

            /* 百分比 */
            /* X - 正值 - 左到右 */
            transform: translateX(50%);
            /* X - 负值 - 右到左 */
            transform: translateX(-50%);
            /* Y - 正值 - 上到下 */
            transform:translateY(50%) ;
            /* Y - 负值 - 下到上 */
            transform:translateY(-50%) ;

            /* 混合 */
            /* 如果要调整两个方向实现定位,就要连写 */
            /* 不限定轴向且只有一个值时默认X轴移动 */
            transform: translate(100px);
            /* 第一个值代表x,第二个值代表y轴 */
            transform: translate(100px,200px);
            transform: translate(10px,50%);

         3.1.2 绝对定位居中

        使用场景:使用translate快速实现绝对定位的元素居中效果

position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);

3.1.3 位移缩放案例:

        效果如下:

        鼠标放上去前:

        鼠标放上去后(整体变黑,文本部分恢复原白):   

        思路(个人):

        结构布局就是img＋盒子(内置几个标签装文本)

        因为文本部分看起来是一个可以点击跳转的盒子,所以包裹内容的标签即为a.但是a是行内元素,所以我们要在它的父级display:flex;一下把它变成弹性盒子.再对父盒子设定相对定位,a设为绝对定位,这样a就可以脱离标准流于img叠在一起.

        将a的背景色调为黑色,但透明度为0,这样就能实现出图一效果.后再设置hover选择器悬停将背景色透明度调高,a标签就会浮现出来覆盖img

.但是此时效果是一下子完成的,所以设置transition:all 0.5s linear实现0.5庙后才完成效果

        代码:

<!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>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            margin: auto;
            width: 922px;
            height: 445px;
            /* background-color: pink; */
            position: relative;
            overflow: hidden;
        }

        div>img {
            width: 100%;
            height: 100%;
            transition: 1s linear all;
        }

        .box:hover>img {
            transform: scale(1.1);
        }
        a {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0);
            text-decoration: none;
            display: flex;
            align-items: end;
            color: white;
            transition: all 0.5s linear;
            display: flex;
            flex-direction: column;
        }

        .box:hover>a {
            background-color: rgba(0, 0, 0, 0.5);
        }

        .box div {
            display: flex;
            flex-direction: column;
            justify-content: end;
            padding-left: 20px;
            padding-bottom: 20px;
            transform: translateY(53px);
            transition: all linear 1s;
        }

        .box:hover div {
            transform: translateY(0);
        }

        .box h1 {
            font-size: 16px;
            font-weight: normal;
        }

        .box p:nth-of-type(1) {
            font-size: 25px;
            font-weight: 700;
        }

        .box p:nth-of-type(2) {
            font-size: 18px;
        }

        .box span {
            font-size: 17px;
            margin-top: 30px;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="https://www-file.huawei.com/-/media/corp2020/home/box/8/2024-moving-forward-923-3.jpg" alt="">
        <a href="#">
            <div>
                <h1>新年致辞</h1>
                <p>践踏实地,行稳致远</p>
                <p>
                    轮值董事长胡厚成2024新年致辞
                </p>
                <span>了解更多</span>
            </div>
        </a>
    </div>
</body>

</html>

3.2 旋转

        使用场景:使用rotate将元素实现旋转效果

        语法:transform:rotate(角度);  Tips:取值正负值均可,正值顺时针转,负值逆时针转

        注意:角度单位是deg(也就是度,360度就是360deg)

            /* 正值 - 顺时针转 360则是360度 */
            transform: rotate(360deg);
            /* 负值 - 逆时针转 */
            transform: rotate(-360deg);
            /* 位移＋旋转 */
            transform: translate(400px) rotate(360deg);

        除了直接旋转,还可以改变旋转中心点(也就是围着哪里转):

            /* 改变旋转中心点 */
            /* 方向词 - left right top bottom center */
            /* 使用方向词的时候取值不分先后 */
            /* 右上角 */
            transform-origin: top right;
            /* 左上角 */
            transform-origin: top left;
            /* 右下角 */
            transform-origin: right bottom;
            /* 左下角 */
            transform-origin: left bottom;
            /* 左中 */
            transform-origin: left center;
            transform-origin: left;
            /* 右中 */
            transform-origin: right center;
            transform-origin: right;
            /* 上中 */
            transform-origin: top center;
            transform-origin: top;
            /* 下中 */
            transform-origin: bottom center;
            transform-origin: bottom;
            /* 正中(默认) */
            transform-origin: center;

        还可以自行设定坐标作为旋转点:

            /* px */
            /* 第一个值为x轴,第二个值为y轴凑成坐标点作为旋转中间点 */
            transform-origin: 20px 50px;
            /* 可以去负值,旋转中间点与正值一样 */
            transform-origin: -50px -50px;

            /* 百分比 参照自身 */
            transform-origin: 100% 100%;

            /* 混用 */
            /* 右侧,且y=30px */
            transform-origin: right 30px;
            /* 中间,且在底部 */
            transform-origin: 50% bottom;

        旋转案例

         案例说明:通过位移＋旋转使其滚动

        代码:

<!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{
            width: 1000px;
            height: 100px;
            border: 2px solid grey;

        }
        div>img{
            height: 100%;
            transition: 5s linear all;
        }
        div:hover>img{
            /* transform: rotate(800deg); */
            /* 必须是先位移再旋转 */
            transform: translate(900px) rotate(800deg);
        }
    </style>
</head>
<body>
    <div>
        <img src="./images/tyre.png" alt="">
    </div>
</body>
</html>

        必须先位移再旋转,因为旋转会改变网页元素的坐标轴向,先写旋转会影响到后面的位移.

  3.3 缩放

         使用场景:改变元素尺寸

                transform:scale(x轴缩放倍数、y轴缩放倍数)；

        一般职位scale设置一个值，表示x，y轴等比例缩放

            /* 缩放 - scale */
            /* 1 即为默认大小 */
            transform: scale(1);
            /* 当多个取值时,第一个值代表X轴缩放,第二个值代表y轴 */
            transform: scale(2,1.5);
            /* 如果取值为 -1 则是翻转, -2 即为放大且翻转 */
            transform: scale(-2);

                transform：scale（缩放倍数）；

                scale值大于1表示放大，scale小于1表示缩小

        缩放案例

        效果如下：将鼠标悬停在上面时要有播放键浮现

        代码：

<!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>
        *{
            padding: 0;
            margin: 0;
            /* line-height: 1.5; */
        }
        body{
            font-size: 12px/1.2 '微软雅黑';
        }
        .box{
            width: 520px;
            height: 444px;
            background-color: pink;
            margin: 100px auto;
        }
        .box>div{
            position: relative;
        }
        .box>div>:nth-child(1){
            width: 100%;
        }
        .box>div>:nth-child(2){
            position: absolute;
            left: 50%;
            top: 50%;
            /* 先位移再缩放 */
            transform: translate(-50%,-50%) scale(8);
            /* overflow: hidden; */
            transition: linear all 1s;
            /* visibility: hidden; */
            /* 透明度为0 - 即看不见 */
            opacity: 0;
        }
        .box>div>:nth-child(2):hover{
            transform:translate(-50%,-50%) scale(1);
            visibility: visible;
            /* 透明度为一,即正常 */
            opacity: 1;
        }
        .box>p{
            font-size: 30px;
            padding-left: 24px;
            padding-right: 60px;
            /* line-height: 1; */
            line-height: 50px;
            margin-top: 30px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
            <img src="./images/party.jpeg" alt="">
            <img src="./images/play.png" alt="">
        </div>
        <p>靓仔正靓仔正靓仔正靓仔正靓仔正靓仔正靓仔正靓仔正</p>
    </div>
</body>
</html>

         效果如下：（鼠标放上去后）

3.4 空间转换

       因为是从坐标轴角度去定义的，所以x、y、z三条坐标轴构成一个立体空间，z轴位置与视线方向相同。所以空间转换也叫3D转换

        使用目的：使用translate实现元素空间位移效果

        用法：

        body{
            /* 给父级设置视距 */
            perspective: 700px;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            transition: all linear 1s;
            /* transform:translate3d(0px,0px,300px) */
        }
        div:hover{
            transform: translateX(100px);
            transform: translateY(100px);
            /* Z轴取正值,靠近眼睛变大,Z轴取负值远离眼睛变小 */
            transform: translateZ(500px);
            /* 连写 - x,y,z(z不能是百分比) */
            transform:translate3d(0px,0px,300px)
        }

3.5 透视

        目标：使用perspective属性实现透视效果

        作用：空间转换时为元素添加近大远小、近实远虚的视觉效果 

        属性：perspective：值；

        透视距离又称为视距，也就是人的眼睛到屏幕的距离

        用法：添加给父级

/* 给父级设置视距 */
perspective: 700px;

3.6 空间旋转

         使用场景：使用rotate实现元素的空间旋转效果

         用法： Tips：rotate3d（x，y，z，角度度数）：用来设置自定义旋转轴的位置及旋转的角度

            /* 绕着Z轴转 */
            transform: rotateZ(180deg);
            /* 绕着X轴转 */
            transform: rotateX(60deg);
            /* 绕着Y轴 */
            transform: rotateY(60deg);
            /* 3d转法 x,y,z,角度 */
            transform: rotate3d(1,1,0,40deg);

        但是如果我们看到一个空间旋转的图，我们要怎么判断其值？

        左手法则：举起左手握拳露出大拇指，握住旋转轴，大拇指指向的是x轴正值，其余手指内扣的方向为y正值，反之则是负值。

3.7 立体呈现

        使用目的：使用transform-style：preserve-3d呈现立体图形

        上面学的透视能实现立体呈现吗？不能，因为perspective只增加近大远小、近实远虚的视觉效果。

        实现方法：

        添加transform-style：preserve-3d；使子元素处于真正的3d空间

        随后再设置子盒子的位置（位移或旋转）

        Tips：在3d空间内，转换元素都有自己独立的坐标轴，互不干扰

立体呈现案例：3D导航

         需要实现以下效果：

        静态下

         鼠标悬停过程：

        思路（个人）：

        先观察基础结构：一个ul，内置三个li，li内置两个标签。

        css部分：display：flex；将其横向排列，给li设背景颜色绿色，然后用选择器选择每个li的第一个a标签使其往前一点(z轴),再选到第二个a标签,使其在y轴上往后翻一点,并绕着x轴往后90度.

:hover悬停则让其绕着x轴往前90度

        代码;

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        ul{
            width: 600px;
            height: 50px;
            background-color: pink;
            margin: 200px auto;
            display: flex;
        }
        li{
            flex: 1;
            /* width: 200px;
            height: 100%; */
            text-align: center;
            line-height: 50px;
            position: relative;
            transform-style: preserve-3d;
            /* transition: rotate; */
            transition: all linear 1s;
        }
        a{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        a:nth-of-type(1){
            background-color: skyblue;
            transform: translateZ(25px);
            text-decoration: none;
        }
        a:nth-of-type(2){
            background-color: rgb(255, 218, 149);
            transform: translateY(-25px) rotateX(90deg);
        }
        li:hover{
            transform: rotateX(-90deg);
            /* border-radius: 15px; */
        }

    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#">首页</a>
            <a href="#">index</a>
        </li>
        <li>
            <a href="#">首页</a>
            <a href="#">index</a>
        </li>
        <li>
            <a href="#">首页</a>
            <a href="#">index</a>
        </li>
    </ul>
</body>
</html>

3.8 空间缩放

        使用目的:使用scale实现空间缩放效果

        用法:

            /* 缩放 - scale */
            /* 1 即为默认大小 */
            transform: scale(1);
            /* 当多个取值时,第一个值代表X轴缩放,第二个值代表y轴 */
            transform: scale(2,1.5);
            /* 如果取值为 -1 则是翻转, -2 即为放大且翻转 */
            transform: scale(-2);