D13看YT學 CSS動畫_雜訊失敗

2022 iThome 鐵人賽

DAY 13

自我挑戰組

CSS UI(動畫)相關系列第 13 篇

14th鐵人賽

kypss95120

2022-09-27 21:06:02

361 瀏覽

分享至

不知道是哪裏寫錯，成果變得很滑稽(雜訊變成一張紋理朝左上方放大縮小)
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;
}

(成果截圖看不出來)
今天先這樣，明天找別的，這個有空再回來處理