不知道是哪裏寫錯,成果變得很滑稽(雜訊 變成 一張紋理朝左上方放大縮小)
https://www.youtube.com/watch?v=z1ES-oz4SbM&list=PL5e68lK9hEzd-ZM4Km6xUia-mxQp52G6U&index=23
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>測試</title>
<link href="C1.css" rel="stylesheet" type="text/css">
</head>
<body>
<section></section>
<svg>
<filter id="noi">
<feTurbulence id="turbulence">
<animate attributeName="baseFrequency" dur="1s" values="0.9 0.9;0.8 0.8;0.9 0.9;" repeatCount="indefinite"></animate>
</feTurbluence>
<feDisplacementMap in="SourceGraphic" scale="60"></feDisplacementMap>
</filter>
</svg>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
position: absolute;
top: -50px;
left: -50px;
width: calc(100% + 50px);
height: calc(100% + 50px);
background: repeating-linear-gradient(#111,#111 50%,#fff 50%, #fff);
background-size: 5px 5px;
filter: url(#noi);
}
svg{
width: 0;
height: 0;
}
(成果 截圖看不出來)
今天先這樣,明天找別的,這個有空再回來處理