CSS实现斑马线条纹背景效果小练习~

逃离我推掉我的手 2022-02-20 08:15 961阅读 0赞

### 利用html与css实现斑马线条纹背景效果： ###

效果如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70][]

代码如下：

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>css实现斑马线背景效果</title>
     <style type="text/css">
        /*第一个斜条黑白色*/
    	.test1 {
    	  width: 500px;
    	  height: 80px;
    	  margin: 0 auto;
    	  background: repeating-linear-gradient( 50deg, #000, #000 5px, #fff 5px, #fff 12px );
    	}
    	
         /*第二个横式水平双条纹*/
    	.test2{
    		width: 500px;
    		height: 80px;
    		margin: 20px auto;
    		background: linear-gradient(#fb5 35%, #58a 35%);
    		background-size: 100% 30px;
    	}
    
    	/*第三个垂直条纹 */
    	.test3{	
    		width: 520px;
    		height: 80px;
    		margin: 20px auto;
    		background: linear-gradient(to right, #000 50%, #fff 50%);
    		background-size: 30px 100%;
    	}
     </style>
    </head>
    <body>
    		
    		<div class="test1"></div>
     		<div class="test2"></div>
            <div class="test3"></div>
    
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvcmluZ3JheQ_size_16_color_FFFFFF_t_70]: /images/20220220/8d069c3790534c618dca1d720c915217.png

发表评论取消回复

表情：

评论列表（有 0 条评论，961人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML&CSS实现导航栏滑动背景效果

大家可以先看一下背景滚动的效果 ![在这里插入图片描述][20201230172825172.png] ![在这里插入图片描述][20201230172715552.gi

今天药忘吃喽~/ 2023年01月01日 02:48/ 0 赞/ 291 阅读

相关 164.CSS＆JavaScript背景动画效果

效果 (源码网盘地址在最后) ![a26da1fd924c8bb592a392357a8b4185.gif][] 源码 index.html <!DOC

桃扇骨/ 2022年10月08日 05:39/ 0 赞/ 187 阅读

相关 CSS实现兼容性的渐变背景(gradient)效果

一、有点俗态的开场白要是两年前，实现“兼容性的渐变效果”这个说法估计不会被提出来的，那个时候，说起渐变背景，想到的多半是IE的渐变滤镜，其他浏览器尚未支持，但是，在对C

妖狐艹你老母/ 2022年09月30日 00:44/ 0 赞/ 236 阅读

相关 CSS文字条纹阴影动画

See the Pen [shadow text][] by haiqing wang ([@whqet][whqet]) on[CodePen][]. 今天给大家推荐个动画

比眉伴天荒/ 2022年08月24日 14:17/ 0 赞/ 268 阅读

相关 canvas多彩条纹背景

See the Pen [ Canvas stripes][Canvas stripes] by haiqing wang ([@whqet][whqet]) on[CodeP

柔光的暖阳◎/ 2022年08月24日 14:17/ 0 赞/ 239 阅读

相关 CSS斑马条纹背景

最近的一道面试题：css实现斑马条纹背景。 ▍效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

傷城~/ 2022年03月02日 14:28/ 0 赞/ 292 阅读

相关 CSS实现斑马线条纹背景效果小练习~

利用html与css实现斑马线条纹背景效果：效果如图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

逃离我推掉我的手/ 2022年02月20日 08:15/ 0 赞/ 962 阅读

相关 css实现一个容器多背景图效果

特殊需求：在日常开发中，有些时候往往只需要一张特别大的图片作为背景图即可，但一些特殊情况下，我们不得不用一些小图凑成一张特别的大背景图别问我为什么，业务需要。 ![2

ゞ浴缸里的玫瑰/ 2021年09月19日 02:10/ 0 赞/ 337 阅读

相关 CSS实现漂亮的小水球效果

先看效果图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

灰太狼/ 2021年07月26日 12:51/ 0 赞/ 531 阅读

相关 css如何实现网页背景动态渐变效果

linear-gradient() 函数用于创建一个线性渐变的 "图像"。为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止...

朱雀/ 2020年04月28日 06:35/ 0 赞/ 1093 阅读