css实现动态渐变闪烁功能

最新推荐文章于 2023-07-07 16:05:03 发布

今天超市大减价

最新推荐文章于 2023-07-07 16:05:03 发布

阅读量592

点赞数

分类专栏：前端 CSS学习文章标签： css

本文链接：https://blog.csdn.net/qq_40146789/article/details/120100611

版权

前端同时被 2 个专栏收录

65 篇文章 1 订阅

订阅专栏

CSS学习

7 篇文章 0 订阅

订阅专栏

1、页面展示（uni-app项目）

<view class="red-dot" style="width:24rpx;
  height:24rpx;border-radius:12rpx;background:#DB1F1F;">
</view>

2、css样式

.red-dot{
  animation:fade 1500ms infinite;
  -webkit-animation:fade 1500ms infinite;
}
@keyframes fade {
  from { opacity: 1.0; }
  50% { opacity: 0.4; }
  to { opacity: 1.0; }
}
@-webkit-keyframes fade {
  from { opacity: 1.0; }
  50% { opacity: 0.4; }
  to { opacity: 1.0; }
}

记录于2021/09/04。