CSS：实现一个斑马线效果（条纹背景）

斑马线效果

<div class="zebra-crossing"></div>

.zebra-crossing {width: 180px;height: 100px;margin: 1em;background: linear-gradient(to right, #fff 50%, #bbbbbb 0);background-size: 30px 100%;
}

几种条纹背景的实现

1. 基础渐变

<div class="demo1"></div>

.demo1 {width: 200px;height: 100px;margin: 1em;background: linear-gradient(#fb3, yellowgreen);
}

2. 水平条纹

<div class="demo2"></div>

.demo2 {width: 200px;height: 100px;margin: 1em;background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0

CSS：实现一个斑马线效果（条纹背景）相关推荐

css：linear-gradient实现水平条纹背景，垂直条纹背景，斜向条纹背景
一.水平条纹效果: <html> <head> <style type="text/css"> div { font-size:100px; t ...
css实现大屏效果的背景div
实现大屏效果的背景div, 效果如下: html <div class="box">1111111</div> css .box {width: 200px ...
CSS图像绘制之：条纹背景（转）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>漂亮的 ...
用CSS实现一个聚光灯效果
今天又学习了一个使用CSS实现的聚光灯特效,来一起看看把,效果如下: 实现步骤 1. 构建结构 <body><h1 class="spotlight" data- ...
html图片怎么加动画效果,css打造一个动画效果的图片墙
今天我们将开始建立另一个有趣的CSS演示.这次我们将创建一个大的.无缝的照片墙.当用户将鼠标悬停于一个图像,一个透明的黑色渐变效果覆盖在其上面. Demo:点击这里 HTML代码第一步我们需要创建一 ...
用CSS画一个针线包效果的边框
今天,发现用CSS可以做出很漂亮的针线包样式的边框(有点类似border的dashed样式), 先放效果图: 很漂亮吧,其实,主要CSS就是给 border-style:dashed 加上 box- ...
html 用css画出斑马线,使用CSS3实现一个斑马线的效果
不得不说CSS是绚烂的,实现一个斑马线效果的方式多种多样. 我整理了4种实现斑马线效果的方式,以供学习记录.下面一一介绍. 1.使用box-shadow属性.这恐怕是最low的一种实现了. 效果: 代 ...
[css] 使用css3实现一个斑马线的效果
[css] 使用css3实现一个斑马线的效果 @ferrinweb 如果需要很多或者无限扩展的斑马线,你这个方案就有缺点了 @cxwht 你的方案需要增加额外的元素,不太理想最好的办法是用渐变背景实 ...
html中背景条纹效果,CSS制作Web页面条纹背景样式的技巧分享
通过CSS中的linear-gradient主要就能显示出不同方向的条纹效果,这里我们就了解CSS制作Web页面条纹背景样式的技巧分享,需要的朋友可以参考下一.横向条纹如下代码:background ...

CSS：实现一个斑马线效果（条纹背景）

斑马线效果

几种条纹背景的实现

1. 基础渐变

2. 水平条纹

CSS：实现一个斑马线效果（条纹背景）相关推荐

最新文章

热门文章

CSS：实现一个斑马线效果 （条纹背景）

斑马线效果

几种条纹背景的实现

1. 基础渐变

2. 水平条纹

CSS：实现一个斑马线效果 （条纹背景）相关推荐

最新文章

热门文章

CSS：实现一个斑马线效果（条纹背景）

CSS：实现一个斑马线效果（条纹背景）相关推荐