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

逃离我推掉我的手 2022-02-20 08:15 984阅读 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 条评论，984人围观）

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

相关阅读

相关如何使用CSS实现一个渐变背景效果？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 使用CSS实现渐变背景效果 ⭐ 线性渐变（Linear Gradient） ⭐ 径向渐变（Radial

清疚/ 2023年10月14日 20:46/ 0 赞/ 16 阅读

相关 css3 背景渐变色实现过渡效果

前言：对于设了渐变颜色的background，css会当做背景图片处理，这时直接设过渡transition会没有效果；整理了两种用过的，给渐变背景加过渡的方法：方法

浅浅的花香味﹌/ 2023年03月01日 09:40/ 0 赞/ 22 阅读

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

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

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

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

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

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

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

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

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

相关 canvas多彩条纹背景

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

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

相关 CSS斑马条纹背景

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

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

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

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

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

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

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

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

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

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

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