iT邦幫忙

2022 iThome 鐵人賽

DAY 13
0
自我挑戰組

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

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

  • 分享至 

  • xImage
  •  

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

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


上一篇
D12看YT學 CSS動畫_雜訊1 (紋理)
下一篇
D14看YT學 CSS動畫_圓形進度條1 (光圈雛形)
系列文
CSS UI(動畫)相關30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言