devbox
寸_铁
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：寸_铁 | 2024-08-17 12:23:56

赞

踩

鸿蒙 lineargradient

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);

        从左到右渐变

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

         从下往上渐变

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

        从右到左渐变

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

        对角线渐变:

  1. /* 左上到右下渐变 */
  2. background: linear-gradient(to bottom right,red,yellow);
  3. /* 右下到左上渐变 */
  4. background: linear-gradient(to left top,purple,skyblue);
  5. /* 右上到左下渐变 */
  6. background: linear-gradient(to left bottom,orange,yellowgreen);
  7. /* 左下到左上渐变 */
  8. background: linear-gradient(to right top,black,white);

效果如下: 

 

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

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

径向渐变

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

         径向默认渐变:

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

        效果如下: 

         调整渐变颜色占比:

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

         效果如下:

         调整渐变形状

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

        效果如下:

         重复径向渐变:

  1.             /* 重复径向渐变 */
  2.             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( ) 实现一个关键逐帧动画的功能

       代码案例: 

  1. <style>
  2.         div{
  3.             width: 300px;
  4.             height: 100px;
  5.             background-color: pink;
  6.             /* 过渡的属性 : 背景颜色 , 宽度 */
  7.             transition-property: background-color,width;
  8.             /* 过渡的时间 */
  9.             transition-duration: 2s;
  10.             /* 延迟时间 */
  11.             /* transition-delay: 2s; */
  12.             /* 运动轨迹 */
  13.             /* linear - 匀速 */
  14.             /* transition-timing-function: linear; */
  15.             /* eaase - 中速 - 快 - 慢 */
  16.             transition-timing-function: ease;
  17.             /* ease - 加速 */
  18.             transition-timing-function: ease-in;
  19.             /* ease-out - 减速 */
  20.             transition-timing-function: ease-out;
  21.             /* ease-in-out - 慢-快-慢 */
  22.             transition-timing-function: ease-in-out;
  23.             /* steps - 逐帧 */
  24.             /* transition-timing-function: steps(5); */
  25.  
  26.             /* 连写 */
  27.             /* 同时有两个时间的时候,第一个代表运动执行的时间,
  28.             第二个代表延迟时间,只有一个时间的时候代表运动执行时间 */
  29.             /* 只有时间要按照指定顺序设置,其他属性值在哪都行 */
  30.             /* all值会变化所有相关属性 */
  31.             /* 过渡属性值 - 过渡完成时间 - 延迟(反应)时间 - 全部相关属性 - 匀速*/
  32.             transition: 2s 0s all linear ;
  33.         }
  34.         div:hover{
  35.             width: 600px;
  36.             background-color: aquamarine;
  37.         }
  38.  
  39.         p{
  40.             width: 100px;
  41.             height: 300px;
  42.             background-color: orange;
  43.             transition:2s all linear;
  44.         }
  45.         p:hover{
  46.             height: 600px;
  47.             background-color: yellowgreen;
  48.         }
  49.     </style>

 三.平面转换

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

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

        平面转换属性:transform

      3.1 位移

        3.1.1 用法:

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

        取值(正负均可):

                像素单位数值

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

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

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

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

        示例代码:

  1.             /* 位移 */
  2.             /* 具体值 */
  3.             /* 位移-左到右 */
  4.             transform: translateX(100px);
  5.             /* 位移-右到左 */
  6.             transform: translateX(-50px);
  7.             /* 上到下 */
  8.             transform: translateY(100px);
  9.             /* 下到上 */
  10.             transform: translateY(-50px);
  11.  
  12.             /* 百分比 */
  13.             /* X - 正值 - 左到右 */
  14.             transform: translateX(50%);
  15.             /* X - 负值 - 右到左 */
  16.             transform: translateX(-50%);
  17.             /* Y - 正值 - 上到下 */
  18.             transform:translateY(50%) ;
  19.             /* Y - 负值 - 下到上 */
  20.             transform:translateY(-50%) ;
  21.  
  22.             /* 混合 */
  23.             /* 如果要调整两个方向实现定位,就要连写 */
  24.             /* 不限定轴向且只有一个值时默认X轴移动 */
  25.             transform: translate(100px);
  26.             /* 第一个值代表x,第二个值代表y轴 */
  27.             transform: translate(100px,200px);
  28.             transform: translate(10px,50%);

         3.1.2 绝对定位居中

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

  1. position:absolute;
  2. left:50%;
  3. top:50%;
  4. 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庙后才完成效果

        代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         * {
  10.             padding: 0;
  11.             margin: 0;
  12.         }
  13.  
  14.         div {
  15.             margin: auto;
  16.             width: 922px;
  17.             height: 445px;
  18.             /* background-color: pink; */
  19.             position: relative;
  20.             overflow: hidden;
  21.         }
  22.  
  23.         div>img {
  24.             width: 100%;
  25.             height: 100%;
  26.             transition: 1s linear all;
  27.         }
  28.  
  29.         .box:hover>img {
  30.             transform: scale(1.1);
  31.         }
  32.         a {
  33.             position: absolute;
  34.             width: 100%;
  35.             height: 100%;
  36.             top: 0;
  37.             left: 0;
  38.             background-color: rgba(0, 0, 0, 0);
  39.             text-decoration: none;
  40.             display: flex;
  41.             align-items: end;
  42.             color: white;
  43.             transition: all 0.5s linear;
  44.             display: flex;
  45.             flex-direction: column;
  46.         }
  47.  
  48.         .box:hover>a {
  49.             background-color: rgba(0, 0, 0, 0.5);
  50.         }
  51.  
  52.         .box div {
  53.             display: flex;
  54.             flex-direction: column;
  55.             justify-content: end;
  56.             padding-left: 20px;
  57.             padding-bottom: 20px;
  58.             transform: translateY(53px);
  59.             transition: all linear 1s;
  60.         }
  61.  
  62.         .box:hover div {
  63.             transform: translateY(0);
  64.         }
  65.  
  66.         .box h1 {
  67.             font-size: 16px;
  68.             font-weight: normal;
  69.         }
  70.  
  71.         .box p:nth-of-type(1) {
  72.             font-size: 25px;
  73.             font-weight: 700;
  74.         }
  75.  
  76.         .box p:nth-of-type(2) {
  77.             font-size: 18px;
  78.         }
  79.  
  80.         .box span {
  81.             font-size: 17px;
  82.             margin-top: 30px;
  83.         }
  84.     </style>
  85. </head>
  86.  
  87. <body>
  88.     <div class="box">
  89.         <img src="https://www-file.huawei.com/-/media/corp2020/home/box/8/2024-moving-forward-923-3.jpg" alt="">
  90.         <a href="#">
  91.             <div>
  92.                 <h1>新年致辞</h1>
  93.                 <p>践踏实地,行稳致远</p>
  94.                 <p>
  95.                     轮值董事长胡厚成2024新年致辞
  96.                 </p>
  97.                 <span>了解更多</span>
  98.             </div>
  99.         </a>
  100.     </div>
  101. </body>
  102.  
  103. </html>

3.2 旋转

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

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

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

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

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

  1.             /* 改变旋转中心点 */
  2.             /* 方向词 - left right top bottom center */
  3.             /* 使用方向词的时候取值不分先后 */
  4.             /* 右上角 */
  5.             transform-origin: top right;
  6.             /* 左上角 */
  7.             transform-origin: top left;
  8.             /* 右下角 */
  9.             transform-origin: right bottom;
  10.             /* 左下角 */
  11.             transform-origin: left bottom;
  12.             /* 左中 */
  13.             transform-origin: left center;
  14.             transform-origin: left;
  15.             /* 右中 */
  16.             transform-origin: right center;
  17.             transform-origin: right;
  18.             /* 上中 */
  19.             transform-origin: top center;
  20.             transform-origin: top;
  21.             /* 下中 */
  22.             transform-origin: bottom center;
  23.             transform-origin: bottom;
  24.             /* 正中(默认) */
  25.             transform-origin: center;

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

  1.             /* px */
  2.             /* 第一个值为x轴,第二个值为y轴凑成坐标点作为旋转中间点 */
  3.             transform-origin: 20px 50px;
  4.             /* 可以去负值,旋转中间点与正值一样 */
  5.             transform-origin: -50px -50px;
  6.  
  7.             /* 百分比 参照自身 */
  8.             transform-origin: 100% 100%;
  9.  
  10.             /* 混用 */
  11.             /* 右侧,且y=30px */
  12.             transform-origin: right 30px;
  13.             /* 中间,且在底部 */
  14.             transform-origin: 50% bottom;

        旋转案例

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

        代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         div{
  9.             width: 1000px;
  10.             height: 100px;
  11.             border: 2px solid grey;
  12.  
  13.         }
  14.         div>img{
  15.             height: 100%;
  16.             transition: 5s linear all;
  17.         }
  18.         div:hover>img{
  19.             /* transform: rotate(800deg); */
  20.             /* 必须是先位移再旋转 */
  21.             transform: translate(900px) rotate(800deg);
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div>
  27.         <img src="./images/tyre.png" alt="">
  28.     </div>
  29. </body>
  30. </html>

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

  3.3 缩放

         使用场景:改变元素尺寸

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

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

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

                transform：scale（缩放倍数）；

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

        缩放案例

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

        代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         *{
  9.             padding: 0;
  10.             margin: 0;
  11.             /* line-height: 1.5; */
  12.         }
  13.         body{
  14.             font-size: 12px/1.2 '微软雅黑';
  15.         }
  16.         .box{
  17.             width: 520px;
  18.             height: 444px;
  19.             background-color: pink;
  20.             margin: 100px auto;
  21.         }
  22.         .box>div{
  23.             position: relative;
  24.         }
  25.         .box>div>:nth-child(1){
  26.             width: 100%;
  27.         }
  28.         .box>div>:nth-child(2){
  29.             position: absolute;
  30.             left: 50%;
  31.             top: 50%;
  32.             /* 先位移再缩放 */
  33.             transform: translate(-50%,-50%) scale(8);
  34.             /* overflow: hidden; */
  35.             transition: linear all 1s;
  36.             /* visibility: hidden; */
  37.             /* 透明度为0 - 即看不见 */
  38.             opacity: 0;
  39.         }
  40.         .box>div>:nth-child(2):hover{
  41.             transform:translate(-50%,-50%) scale(1);
  42.             visibility: visible;
  43.             /* 透明度为一,即正常 */
  44.             opacity: 1;
  45.         }
  46.         .box>p{
  47.             font-size: 30px;
  48.             padding-left: 24px;
  49.             padding-right: 60px;
  50.             /* line-height: 1; */
  51.             line-height: 50px;
  52.             margin-top: 30px;
  53.         }
  54.     </style>
  55. </head>
  56. <body>
  57.     <div class="box">
  58.         <div>
  59.             <img src="./images/party.jpeg" alt="">
  60.             <img src="./images/play.png" alt="">
  61.         </div>
  62.         <p>靓仔正靓仔正靓仔正靓仔正靓仔正靓仔正靓仔正靓仔正</p>
  63.     </div>
  64. </body>
  65. </html>

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

3.4 空间转换

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

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

        用法：

  1.         body{
  2.             /* 给父级设置视距 */
  3.             perspective: 700px;
  4.         }
  5.         div{
  6.             width: 200px;
  7.             height: 200px;
  8.             background-color: pink;
  9.             margin: 100px auto;
  10.             transition: all linear 1s;
  11.             /* transform:translate3d(0px,0px,300px) */
  12.         }
  13.         div:hover{
  14.             transform: translateX(100px);
  15.             transform: translateY(100px);
  16.             /* Z轴取正值,靠近眼睛变大,Z轴取负值远离眼睛变小 */
  17.             transform: translateZ(500px);
  18.             /* 连写 - x,y,z(z不能是百分比) */
  19.             transform:translate3d(0px,0px,300px)
  20.         }

3.5 透视

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

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

        属性：perspective：值；

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

        用法：添加给父级

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

3.6 空间旋转

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

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

  1.             /* 绕着Z轴转 */
  2.             transform: rotateZ(180deg);
  3.             /* 绕着X轴转 */
  4.             transform: rotateX(60deg);
  5.             /* 绕着Y轴 */
  6.             transform: rotateY(60deg);
  7.             /* 3d转法 x,y,z,角度 */
  8.             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度

        代码;

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         ul,li{
  13.             list-style: none;
  14.         }
  15.         ul{
  16.             width: 600px;
  17.             height: 50px;
  18.             background-color: pink;
  19.             margin: 200px auto;
  20.             display: flex;
  21.         }
  22.         li{
  23.             flex: 1;
  24.             /* width: 200px;
  25.             height: 100%; */
  26.             text-align: center;
  27.             line-height: 50px;
  28.             position: relative;
  29.             transform-style: preserve-3d;
  30.             /* transition: rotate; */
  31.             transition: all linear 1s;
  32.         }
  33.         a{
  34.             width: 100%;
  35.             height: 100%;
  36.             position: absolute;
  37.             top: 0;
  38.             left: 0;
  39.         }
  40.         a:nth-of-type(1){
  41.             background-color: skyblue;
  42.             transform: translateZ(25px);
  43.             text-decoration: none;
  44.         }
  45.         a:nth-of-type(2){
  46.             background-color: rgb(255, 218, 149);
  47.             transform: translateY(-25px) rotateX(90deg);
  48.         }
  49.         li:hover{
  50.             transform: rotateX(-90deg);
  51.             /* border-radius: 15px; */
  52.         }
  53.  
  54.     </style>
  55. </head>
  56. <body>
  57.     <ul>
  58.         <li>
  59.             <a href="#">首页</a>
  60.             <a href="#">index</a>
  61.         </li>
  62.         <li>
  63.             <a href="#">首页</a>
  64.             <a href="#">index</a>
  65.         </li>
  66.         <li>
  67.             <a href="#">首页</a>
  68.             <a href="#">index</a>
  69.         </li>
  70.     </ul>
  71. </body>
  72. </html>

3.8 空间缩放

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

        用法:

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/寸_铁/article/detail/992794
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号