You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.7 KiB
HTML
56 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
</head>
|
|
|
|
<body>
|
|
<img class="noise" src="https://evoai.cn/assets/img/team.png" alt="">
|
|
<svg style="display: none;">
|
|
<defs>
|
|
<filter id="noiseFilter" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
|
|
primitiveUnits="userSpaceOnUse">
|
|
<feTurbulence type="turbulence" baseFrequency="0 0.21" numOctaves="2" seed="2" stitchTiles="stitch" x="0%" y="0%"
|
|
width="100%" height="100%" result="turbulence" />
|
|
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="10" xChannelSelector="R" yChannelSelector="B"
|
|
x="0%" y="0%" width="100%" height="100%" result="displacementMap" />
|
|
</filter>
|
|
</defs>
|
|
</svg>
|
|
<style>
|
|
@property --noise-base {
|
|
syntax: '<number>';
|
|
inherits: true;
|
|
initial-value: 0;
|
|
}
|
|
.noise {
|
|
width: 50vmin;
|
|
margin: 1em auto;
|
|
filter: url(#noiseFilter);
|
|
--noise-base: 0;
|
|
animation: am-noise 3s linear infinite;
|
|
}
|
|
@keyframes am-noise {
|
|
0% {--noise-base: 0;}
|
|
10% {--noise-base: 0.1;}
|
|
20% {--noise-base: 0;}
|
|
}
|
|
</style>
|
|
<script>
|
|
const noise = document.querySelector('.noise');
|
|
const noiseStyle = getComputedStyle(noise);
|
|
const noiseFilter = document.querySelector('#noiseFilter').firstElementChild;
|
|
console.info(noiseFilter);
|
|
const noisePlayer = ()=>{
|
|
let base = noiseStyle.getPropertyValue('--noise-base');
|
|
noiseFilter.setAttribute('baseFrequency', `0 ${base}`);
|
|
requestAnimationFrame(noisePlayer)
|
|
}
|
|
noisePlayer();
|
|
</script>
|
|
</body>
|
|
|
|
</html> |