D12看YT學 CSS動畫_雜訊1 (紋理)

2022 iThome 鐵人賽

DAY 12

自我挑戰組

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

14th鐵人賽

kypss95120

2022-09-26 17:03:51

476 瀏覽

分享至

參考影片 (有黑白條紋很傷眼)
https://www.youtube.com/watch?v=z1ES-oz4SbM&list=PL5e68lK9hEzd-ZM4Km6xUia-mxQp52G6U&index=22

HTML

<link href="C1.css" rel="stylesheet" type="text/css">
<body>
	<section></section>
	<svg>
		<filter id="noi">
			<feTurbulence id="turbulence">
				<animate attributeName="baseFrequency" dur="0s" values="0.9 0.9; 0.8 0.8; 0.9 0.9; "></animate>
			</feTurbluence>
			<feDisplacementMap in="SourceGraphic" scale="60"></feDisplacementMap>
		</filter>
	</svg>
</body>

CSS

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

section{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(#111,#111 50%,#fff 50%, #fff);
	background-size: 5px 5px;
	filter: url(#noi);
}

成果

不知哪裏弄錯，紋理有點不太對，明天繼續