svg+css模拟真实木头背景效果代码

代码语言:html

所属分类:背景

代码描述:svg+css模拟真实木头背景效果代码

代码标签: 木头 背景 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body{margin:0 auto;}
        svg{position:absolute;}
    </style>




</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
	<defs>
		<pattern id="planks" width="100%" height="20%" patternUnits="userSpaceOnUse">
			<rect width="100%" height="1.7"></rect>
		</pattern>
		<filter id="grain2">
			<feTurbulence baseFrequency="0.0025 0.05" numOctaves="1" />
			<feColorMatrix values="4.2 1.8 0.3 -4.9 2.4 -1 0.8 3.9 2.4 4.7 2.2 0.2 -3.9 4.6 1.2 1.7 -3.7 -3 -4.9 0.6" />
		</filter>
		<filter id="cuts">
			<feTurbulence baseFrequency="0.0009 0.003" numOctaves="10" />
			<feColorMatrix values="1.6 2.6 3.4 1 5 1.5 4.8 2.1 3.3 5 1.6 3.1 4.1 0.6 3.7 2.8 4.8 0.6 2.3 -3.4" />
		</filter>
		<filter id="grain">
			<feTurbulence baseFrequency="0.005 0.09" numOctaves="2.........完整代码请登录后点击上方下载按钮下载查看

网友评论0