css噪点效果及简单假进度条记录

[confidence68]

前言

本文主要介绍一下css噪点效果及简单假进度条记录，最近阅读了张鑫旭的文章，发现了这两点，这两点真的让我自己实现确实需要查阅资料，本文简单的参考一下张大神的文章，同时也作为自己的积累。文章最后会放上参考文章地址，感兴趣的也可以去原文阅读。

CSS实现噪点效果

实现噪点的原理主要是应用了

 background: repeating-conic-gradient

在径向角度比较小的时候，中间区域的图形由于像素点不足，扭曲在了一起，背景区域就会出现随机点，主要是利用了这个特性。

那么实现黑白随机噪点主要运用了如下代码

.dot {
  width: 200px; height: 200px;
  background: repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 60% 60%/3000px 3000px, 
    repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 40% 40%/2000px 3000px;
  background-blend-mode: difference;
}

应用一：老照片效果

<figure>
    <img src="haotoomstest.jpg" />
</figure>
figure {
    display: inline-flex;
    position: relative;    
    filter: sepia(100%);
}
figure::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(#000a, #000a),
        repeating-radial-gradient(#000 0 0.0001%, #fff 0 0.0002%) 50% 0 / 2500px 2500px,
        repeating-conic-gradient(#000 0 0.0001%, #fff 0 0.0002%) 60% 60% / 2500px 2500px;
    background-blend-mode: normal, difference;
    mix-blend-mode: overlay;
    opacity: .6;
}

应用二：噪点文字特效

<div class="title">
    <strong>haorooms博客</strong>
</div>
.title {
    background-color: deepskyblue;
}
.title strong {
    font-size: 100px;
    color: #0000;
    background: 
        repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 50% 0/2500px 2500px,
        repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 50% 50%/2500px 2500px;
    background-blend-mode: difference;
    mix-blend-mode: lighten;
    -webkit-background-clip: text;
          background-clip: text;
}

CSS实现假进度条加载进度：

一开始快，后面慢，最后停留在99.9%的效果。

<div class="progress"></div>

.progress {
    height: 12px; width: 300px;
    background-color: #f0f2f3;
}
.progress::before {
    content: '';
    display: block;
    width: 0;
    height: 100%;
    background-color: #2486ff;
}
.progress.active::before {
    transition: 100s width cubic-bezier(.08,.81,.29,.99);
    width: 99.9%;    
}

假如需要带数字，就要用到property 这个实验属性了，如下代码：

@property --percent { 
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}
.progress {
    width: 300px;
    line-height: 20px;
    background-color: #f0f2f3;
}
.progress::before {
    --percent: 0;
    counter-reset: progress var(--percent);
    content: counter(progress) '%\2002';
    display: block;
    width: calc(300px * var(--percent) / 100);
    font-size: 12px;
    color: #fff;
    background-color: #2486ff;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    transition: none;
}
.progress.active::before {
    --percent: 99;
    transition: 100s --percent cubic-bezier(.08,.81,.29,.99);    
}

例如用css的@Property 实验属性，也可以纯css做倒计时效果

<span style="--num: 0"></span>

@property --num { 
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}
span::after{
  transition: 1s --num;
}

@keyframes minitus {
  to {
    --m: 59
  }
}
@keyframes seconds {
  to {
    --s: 59
  }
}
@keyframes ms {
  to {
    --ms: 99
  }
}
span{
  counter-reset: minitus var(--m) seconds var(--s) ms var(--ms);
  animation: minitus 3600s infinite steps(60, end), 
    seconds 60s infinite steps(60, end), 
    ms 1s infinite steps(100, end);
}
span::before{
  content: counter(minitus, decimal-leading-zero) ':' counter(seconds, decimal-leading-zero) ':' counter(ms, decimal-leading-zero);
}

上面代码可以生成一个自动运行的秒表。

本文参考张鑫旭文章：https://www.zhangxinxu.com/wordpress/2023/06/css-noise/