[css] 使用css3实现一个斑马线的效果

@ferrinweb 如果需要很多或者无限扩展的斑马线，你这个方案就有缺点了
@cxwht 你的方案需要增加额外的元素，不太理想
最好的办法是用渐变背景实现
linear-gradient( [ [ <angle> | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
/*角度|方向、开始颜色 开始位置、结束颜色 结束位置*/
我们将开始位置与结束位置设置为相等或大于，就可以得到条纹图案。示例：https://codepen.io/xiangshuo1992/pen/qLdWdY （含11个demo）水平条纹
{background: linear-gradient(#fb3 33.3%,#58a 0, #58a 66.6%, yellowgreen 0);background-size: 100% 45px;
}
垂直条纹
{background: linear-gradient(to right, /* 或 90deg */#fb3 50%, #58a 0);background-size: 30px 100%;
}
45deg斜条纹
{background: linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0);background-size: 30px 30px;
}/*计算准确的15px宽斜条纹*/
{background: linear-gradient(45deg,#fb3 25%, #58a 0, #58a 50%,#fb3 0, #fb3 75%, #58a 0);background-size: 42.43px 42.43px;
}
更好的斜向条纹
/*循环渐变实现斜条纹*/
{background: repeating-linear-gradient(45deg,#fb3, #fb3 15px, #58a 0, #58a 30px);
}/*两种方式结合*/
{background: repeating-linear-gradient(45deg,#fb3 0, #fb3 25%, #58a 0, #58a 50%);background-size: 42.43px 42.43px;
}
灵活的同色系条纹
{background: #58a;background-image: repeating-linear-gradient(30deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,transparent 0, transparent 30px);
}

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

[css] 使用css3实现一个斑马线的效果相关推荐

html 用css画出斑马线,使用CSS3实现一个斑马线的效果
不得不说CSS是绚烂的,实现一个斑马线效果的方式多种多样. 我整理了4种实现斑马线效果的方式,以供学习记录.下面一一介绍. 1.使用box-shadow属性.这恐怕是最low的一种实现了. 效果: 代 ...
[css] 使用css3做一个魔方旋转的效果
[css] 使用css3做一个魔方旋转的效果总的来说,用了一些 3D 效果的样式,如 translate3d,rotate3d,perspective,transform-style: preser ...
[css] 使用css3画一个扇形
[css] 使用css3画一个扇形四个半圆叠加,过半调整 z-index .container { width: 200px; height: 200px; position: relative; ...
[css] 用css3实现文字发光的效果
[css] 用css3实现文字发光的效果 <!DOCTYPE html> <html lang="en"><head><meta char ...
用css3制作一个搜索框效果
搜索框的形式有多种多样,今天试着用css3做了一个搜索框, html代码如下: <form class="form-wrapper"> <input type ...
css3做一个loading动画效果（详细思路）
纯css3的动画做效果: 小人来回移动,碰到小球时,小球消失. 首先,html搭建结构: <body><div class="wrapper"><di ...
用 CSS 从零写一个时间轴效果
时间轴效果介绍在前端开发中,我们会遇到一些场景特别适合用时间轴来展示,例如下面按照日期时间来记录发生的事件: 还可以做成下面这种比较流行的左右对称卡片风格的时间轴: 如果再稍加装饰,还能有更加高大上 ...
css3 实现一个k歌效果和一个进度条的效果
先看两个效果: 相信这两个效果很多人都想要,哈哈,我看到很多app,下载进度就是这样的,虽然平淡,但是很有用,只有你遇到了,才知道为什么有用了. 下面就简单分析一下实现原理. 首先,用到的css3特性 ...
用html CSS实现砸金蛋,css3+js 实现砸金蛋效果
最近闲来无事,在网上看到有人写了个砸金蛋的效果,他是没有用到css3的,当时我就感觉没什么动态效果感觉体验不是很好,所有我就想用css3来改下,于是也来试着写写. 本来想弄个视频给你们看看效果的,但 ...

[css] 使用css3实现一个斑马线的效果

[css] 使用css3实现一个斑马线的效果

个人简介

主目录

[css] 使用css3实现一个斑马线的效果相关推荐

最新文章

热门文章