uniapp纯CSS3渐变线条脉冲动画效果

已于 2023-09-14 10:22:52 修改
阅读量1k 收藏 6
点赞数 3
分类专栏： 记录簿 文章标签： uni-app css3 前端 css
于 2023-09-14 10:20:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/outsider76557/article/details/132850959
版权

一、效果展示

在uniapp实际开发过程中，有些情况svg的格式文件打包后没办法识别，导致动画效果不如预期，这时候就可以选择用css3去手写，以达到开发需求。

二、实现步骤

1，渐变线条

步骤一：上下两个盒子排列

渐变色值：

background-image: linear-gradient(60deg,rgb(247, 162, 25),rgb(15, 185, 176));

圆角：

border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;

border-top-left-radius: 30px;

border-top-right-radius: 30px;

步骤二：伪类元素形成线条

上方盒子伪类元素：

.top-box:before {
        content: "";
        width: 98%;
        height: 100%;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        background: #fff;
        position: absolute;
        left: 50%;
        top: 48%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);

}

下方伪类元素：

.bottom-box:before {
        content: "";
        width: 98%;
        height: 100%;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        background: #fff;
        position: absolute;
        top: 52%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);

}

注意：伪类元素的父级元素要有定位和层级；

.top-box,.bottom-box {
        position: relative;
        z-index: -1;
 }

完整代码如下：

html示例：

  <view class="container">
    <view class="flow-container">
      <view class="top-box"></view>
      <view class="bottom-box"></view>
    </view>
  </view>

css示例：

.container {
    width: 100%;
    height: 100%;

    .flow-container {
      height: 40%;
      width: 50%;
      margin: 20% auto;

      .top-box:before {
        content: "";
        width: 98%;
        height: 100%;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        background: #fff;
        position: absolute;
        left: 50%;
        top: 48%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }

      .top-box {
        width: 100%;
        height: 50%;
        background-image: linear-gradient(60deg,
            rgb(247, 162, 25),
            rgb(15, 185, 176));
        position: relative;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        z-index: -1;
      }

      .bottom-box {
        width: 100%;
        height: 50%;
        background-image: linear-gradient(60deg,
            rgb(247, 162, 25),
            rgb(15, 185, 176));
        position: relative;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        z-index: -1;
      }

      .bottom-box:before {
        content: "";
        width: 98%;
        height: 100%;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        background: #fff;
        position: absolute;
        top: 52%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }
    }
  }

缺点：内容背景不可以透明，而且内外层元素的圆角大小需要计算，但兼容性好；

2，脉冲动画

步骤一：脉冲item渐变
（1）两层元素

代码示例：

<view class="move-item out">
  <view class="in"></view>
</view>
      .move-item {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        position: absolute;
        left:-3px;
        &.out {
          padding: 2px;
          border-radius: 99px;
          background: linear-gradient(60deg,  rgb(247, 162, 25),rgb(15, 185, 176));
        }
        .in {
          width: 100%;
          height: 100%;
          background: #fff;
          border-radius: 99px;
        }
      }
（2）伪元素

完整代码：

<view class="move-item"></view>
      .move-item {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        position: relative;
        left: -3px;
        background: linear-gradient(60deg, #f7a219, #0fb9b0);
        z-index: 9;
      }
      .move-item:before {
        content: "";
        position: absolute;
        width: 60%;
        height: 60%;
        border-radius: 50%;
        background-color: #fff;
        top: 50%;
        left:50%;
        transform: translate(-50%,-50%);
      }
（3）单层元素

<view class="move-item"></view>
      .move-item {
        border: 2px solid transparent;
        border-radius: 99px;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(to right, #fff, #fff),
        linear-gradient(60deg, #f7a219, #0fb9b0);
        position: absolute;
        left: -3px;
        width: 5px;
        height: 5px;
      }
步骤二：脉冲item渐变色动画

为了方便看清楚动画效果，上图放大了尺寸。

样式完整代码：

       @keyframes animate_bg {
        0% {
          background-position: 0%, 0%;
        }
  
        50% {
          background-position: 50%, 50%;
        }
  
        100% {
          background-position: 100%, 100%;
        }
      } 
     .move-item {
        border: 10px solid transparent;
        border-radius: 50%;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(to right, #fff, #fff),
        linear-gradient(to right, #f7a219, #0fb9b0);
        position: absolute;
        left: -3px;
        width: 50px;
        height: 50px;
        background-size: 300%;
        animation: animate_bg 5s infinite;
      }
步骤三：脉冲item运动动画

（1）创建item元素
      <view class="top-box">
        <view class="move-item top-move-item"></view>
      </view>
      <view class="bottom-box">
        <view class="move-item bottom-move-item"></view>
      </view>
（2）定制动画效果

可能遇到的问题：

Q：动画不够流畅，位置不精确？
A：定制动画的step可以多一点，间距小一点。如果是对称线条的话，可以找到对称的规律即可，比如top或bottom值互换，left和right互换等等。

Q：如何让动画每次循环时都间隔几秒？
A：定制动画时可以前面一段保持初始位置不变，比如0-45%保持的位置或动画效果时一样的，后面可以正常定义。这样可以达到类似的效果；

@keyframes animate_top {
    0%,45%{

               初始位置

     }

     55%{}

     70%{}

     90%{}

     100%{}
  }

      .move-item {
        border: 2px solid transparent;
        border-radius: 50%;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(to right, #fff, #fff),
          linear-gradient(to right, #f7a219, #0fb9b0);
        position: absolute;
        width: 5px;
        height: 5px;
        background-size: 300%;
      }

      .top-move-item {
        animation: animate_top 4s 0s infinite linear;
      }

      .bottom-move-item {
        animation: animate_bottom 4s 0s infinite linear;
      }


  @keyframes animate_top {
    0% {
      top: 0;
      left: -2%;
      background-position: 0%, 0%;
    }

    15% {
      top: 60%;
      left: -1%;
      background-position: 0%, 0%;
    }

    20% {
      top: 76%;
      left: 2%;
      background-position: 0%, 0%;
    }

    30% {
      top: 90%;
      left: 10%;
      background-position: 0%, 0%;
    }

    45% {
      top: 90%;
      left: 50%;
      background-position: 50%, 50%;
    }

    60% {
      top: 90%;
      left: 85%;
      background-position: 50%, 50%;
    }

    70% {
      top: 80%;
      left: 92%;
      background-position: 100%, 100%;
    }

    75% {
      top: 65%;
      left: 96%;
      background-position: 100%, 100%;
    }

    100% {
      top: 0;
      left: 97%;
      background-position: 100%, 100%;
    }
  }

  @keyframes animate_bottom {
    0% {
      bottom: 0;
      left: -2%;
      background-position: 0%, 0%;
    }

    15% {
      bottom: 60%;
      left: -1%;
      background-position: 0%, 0%;
    }

    20% {
      bottom: 76%;
      left: 2%;
      background-position: 0%, 0%;
    }

    30% {
      bottom: 90%;
      left: 10%;
      background-position: 0%, 0%;
    }

    45% {
      bottom: 90%;
      left: 50%;
      background-position: 50%, 50%;
    }

    60% {
      bottom: 90%;
      left: 85%;
      background-position: 50%, 50%;
    }

    70% {
      bottom: 80%;
      left: 92%;
      background-position: 100%, 100%;
    }

    75% {
      bottom: 65%;
      left: 96%;
      background-position: 100%, 100%;
    }

    100% {
      bottom: 0;
      left: 97%;
      background-position: 100%, 100%;
    }
  }

三、总结

@keyframes 规定动画
animation-name 规定 @keyframes 动画的名称（必须的）
animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认是 0（必须的）
animation-timingfunction  规定动画的速度曲线，默认是“ease”
animation-delay 规定动画何时开始，默认是 0，只在第一次开始时执行，中间循环不起作用
animation-iteration-count 规定动画被播放的次数，默认是 1，还有 infinite
animation-direction 规定动画是否在下一周期逆向播放，默认是 "normal", alternate 逆播放
animation-play-state 规定动画是否正在运行或暂停。默认是 "running", 还有 "paused"
animation 所有动画属性的简写属性，除了animation-play-state 属性

月亮上的垂耳朵1
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值