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

月亮上的垂耳朵1

已于 2023-09-14 10:22:52 修改

阅读量1.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：记录簿文章标签： uni-app css3 前端 css

于 2023-09-14 10:20:06 首次发布

本文链接：https://blog.csdn.net/outsider76557/article/details/132850959

本文介绍了在uniapp开发中遇到SVG格式文件不被识别时，如何使用CSS3实现渐变线条和脉冲动画的步骤，包括代码示例和注意事项，以及关键的CSS动画属性如@keyframes的详细解释。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、效果展示

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

}

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