css斑马线背景
下面的斑马线背景是与文本紧密结构的一种背景图案
实现这种效果，你可以给每一行套元素，然后再添加背景。
不过还有更便捷的另一种方法：给整个元素设置统一的背景图像，然后一次性加上所有的斑马条纹。
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/post/8699.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知