css斑马线背景

时间：5年前阅读：5719

下面的斑马线背景是与文本紧密结构的一种背景图案

实现这种效果，你可以给每一行套元素，然后再添加背景。

不过还有更便捷的另一种方法：给整个元素设置统一的背景图像，然后一次性加上所有的斑马条纹。

linear-gradient() 函数用于创建一个线性渐变的 "图像"。

为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

beige 浅褐色的; 米黄色的; linear-gradient(rgba(0,0,0,0.2) 50% 百分之50渐变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		pre {
    width: 500px;
    height: 252px;
    padding: .5em;
    line-height: 1.5;
    background: beige linear-gradient(rgba(0,0,0,0.2) 50%,transparent 0) content-box 0 0/ auto 3em;
}
		</style>
	</head>
	<body>
	<div class="dd">
	<pre>
//	获得当前被点击li的序号
t=$(this).index();
//	计算大div应该到达的lfet值
var left = t*-750;			
$('#tm .dk').stop().animate({'left':left+'px'},300);										
//	stop()消除叠加运动
//	$('#tm .dk').stop().animate({'left':left+'px'},300,functon(){
// 解决定时器和点击效果冲突  方法(一) 2、用回调函数来恢复定时器  可以在执行完前面运动的300毫秒后,再执行回调函数里的内容
//	dsq = setInterval(hs,1000);
//	});
//	让当前被点击的li透明度变为0.8,兄弟li透明度变为0.6

		</pre>
	</div>      
	</body>
</html>

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

微信扫码关注

更新实时通知

css斑马线背景

网友评论