16
2019
01

css伪随机背景

伪随机背景

  重现随机性是一个挑战,因为CSS本身没有提供任何随机功能。以条纹为例子。假设得到不同颜色和不同宽度的垂直条纹,并且不能让人看出贴片平铺时的接缝。第一个想法可能就是创建一个具有四种颜色的条纹图案

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		.dd{
	width: 200px;
    height: 70px;
    background: linear-gradient(90deg,#fb3 15%,#655 0, #655 40%,#ab4 0, #ab4 65%, hsl(20,40%,90%) 0);
    background-size: 80px 100%;
		}
		</style>
	</head>
	<body>
	<div class="dd">
	</div>      
	</body>
</html>

为了更真实地模拟条纹的随机性,把这组条纹从一个平面拆散为多个图层:一种颜色作为底色,另三种颜色作为条纹,然后再让条纹以不同的间隔进行重复平铺

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		.dd{
	width: 200px;
    height: 70px;
    background: hsl(20,40%,90%);
    background-image: linear-gradient(90deg,#fb3 10px,transparent 0), linear-gradient(90deg,#ab4 20px,transparent 0), linear-gradient(90deg,#655 20px,transparent 0);
    background-size: 80px 100%,60px 100%,40px 100%;
		}
		</style>
	</head>
	<body>
	<div class="dd">
	</div>      
	</body>
</html>

  因为最顶层贴片的重复规律最容易被察觉,应该把平铺间距最大的贴片安排在最顶层

  这里贴片的尺寸实际上就是所有background-size的最小公倍数,而40、60和80的最小公倍数正是240

  根据这个逻辑,要让这种随机性更加真实,得把贴片的尺寸最大化。为了让最小公倍数最大化,这些数字最好是"相对质数。在这种情况下,它们的最小公倍数就是它们的乘积

  下列代码中,平铺贴片的尺寸现在是41×61×83=207583像素,比任何屏幕分辨率都要大。这个技巧被定名为“蝉原则”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		.dd{
	    width: 200px;
    height: 70px;
    background: hsl(20,40%,90%);
    background-image: linear-gradient(90deg,#fb3 11px,transparent 0), linear-gradient(90deg,#ab4 23px,transparent 0), linear-gradient(90deg,#655 41px,transparent 0);
    background-size: 41px 100%,61px 100%,83px 100%;
		}
		</style>
	</head>
	<body>
	<div class="dd">
	</div>      
	</body>
</html>

原文链接:https://www.qiquanji.com/post/8698.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

gzh

微信扫码关注

更新实时通知

« 上一篇 下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。