JZTXT

css 字体一闪闪和有光泽一闪而过效果

发布时间 2023-10-12 09:49:50作者: 小小菜鸟04
<div class="card-remark">请把卡放入读卡器上...</div>

字体一闪闪效果：

 .card-remark {
       font-family: Arial, sans-serif; /* 选择字体 */
      font-size: 36px; /* 设置字体大小 */
       color: rgba(255, 255, 255, 0.5); /* 初始颜色 */
        animation: shimmer 1s infinite; /* 应用动画效果 */
}
@keyframes shimmer {
  0% {
    color: rgba(255, 255, 255, 0.5);
  }
  50% {
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  }
  100% {
    color: rgba(255, 255, 255, 0.5);
  }
}
 

 

光泽光泽一闪而过效果：
.card-remark {
 
        font-family: Arial, sans-serif; /* 选择字体 */
  font-size: 36px; /* 设置字体大小 */
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent); /* 创建一道光的背景 */
  background-size: 200% 100%; /* 背景大小，用于创建光滑移动效果 */
  background-clip: text; /* 使背景仅显示在文字内部 */
  color: transparent; /* 隐藏文字颜色 */
  animation: textShimmer 2s linear infinite; /* 应用动画效果 */
      }
@keyframes textShimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}