关键词：
步骤条很常见，但是网上很多都不太智能，不适合放在手机上的步骤条，应一位朋友的求帮忙，故写了一个可以加任意多个步骤，宽度仍然等比，超过屏幕还可以滑动的步骤条ui。具体展示如下：
于若需要请移步我的github，按照自己的需求自行修改。其中横向滑动可以参加另外一篇文章 ：css如何实现滚动条隐藏但鼠标仍然可以滚动
纯css隐藏滚动条
::-webkit-scrollbar{width:0px;height:1px;}::-webkit-scrollbar-thumb{border-radius:5px;-webkit-box-shadow:inset005pxrgba(0,0,0,0.2);background:rgba(0,0,0,0.2);}直接复制即可 查看详情
纯css实现进度条效果
去年7月份做一个公司商城的微信页面（微信用的chrome内核）需要写一个提示返现进度的进度条效果。 一个完整的进度条效果其实可以拆分一下： 一段背景； 一小段的静态的斜纹进度条； 斜纹... 查看详情
分享一个纯css写的钟表式计时器(代码片段)
话不多说，先上效果图本demo没使用JavaScript，纯CSS3实现，下面是完整代码1<html>2<head>3<metacharset="UTF-8">4<title>时钟</title>5<styletype="text/css">6.screen7width:400px;8height:400px;9border 查看详情
纯css实现顶部进度条随滚动条滚动
一、效果图二、直接复制粘贴<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatibl 查看详情
纯css使用线性渐变实现滚动进度条
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie 查看详情
codepen每日精选（2018-4-2）
...开原始页面。图片切换特效https://codepen.io/ainalem/fu...用svg写的打字机动画https://codepen.io/KPCodes/fu...用canvas画的很多有规律运动的圆https://codepen.io/Mertl/full...纯css画的跳跳虎https://codepen.io/dark_mefod...纯css画的铅笔和尺子https://codepen.io/... 查看详情
codepen每日精选（2018-4-26）
...可以在当前页面预览，点击链接可以打开原始页面。纯css写的滑块控件https://codepen.io/thebabydin...用canvas写的蜂巢动画https://codepen.io/towc/pen/z...用canvas写的彗星风格的拖尾动画https://codepen.io/thebabydin...纯css写的齿轮动画https://codepen.io... 查看详情
codepen每日精选（2018-4-3）
...可以在当前页面预览，点击链接可以打开原始页面。纯css写的卫星围绕行星的动画https://codepen.io/YusukeNaka...文字变汽车的动画https://codepen.io/PointC/ful...用vanvas随机画的抽象几何图案https://codepen.io/ge1doot/fu...为人物换装的交互效果htt... 查看详情
纯css，div隐藏滚动条，保留鼠标滚动效果。
代码如下：<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title></title><stylety 查看详情
纯css3制作圆形进度条所遇到的问题
近日在开发的页面中，需要制作一个动态的圆形进度条，首先想到的是利用两个矩形，宽等于直径的一半，高等于直径，两个矩形利用浮动贴在一起，设置overflow：hidden属性，作为盒子，内部有一个与其宽高相等的子盒子，... 查看详情
纯css修改select的下拉箭头与默认滚动条
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0 查看详情
codepen每日精选（2018-4-19）
...可以在当前页面预览，点击链接可以打开原始页面。纯css写的创意灯泡动画https://codepen.io/uzcho_/ful...纯css画的文字阴影https://codepen.io/GeorgePark...纯css画的海报https://codepen.io/vicbergqui...纯css写的电池充电动画https://codepen.io/skoyah/ful...... 查看详情
纯js写的2048游戏，分享之
这几天玩儿着2048这个游戏，突然心血来潮想练习下敲代码的思路。于是乎就模仿做了一个，到眼下位置还没有实现动态移动，不是非常好看，只是玩儿着自己模仿的小游戏还是蛮爽的，哈哈假设没有玩儿过这个游戏，最好先试... 查看详情
codepen每日精选（2018-4-15）
...Aksh...选择汉堡包的交互动画https://codepen.io/chrisganno...用svg写的小球弹跳下落的动画https://codepen.io/chrisganno...纯css写的图片颜色渐变效果https://codepen.io/jcoulterde...纯css写的烟雾效果https://codepen.io/jcoulterde...纯css写的心愿单交互效果htt... 查看详情
codepen每日精选（2018-4-13）
...io/FabioG/ful...纯css画的宇航员https://codepen.io/hjdesigner...纯css写的小球钟摆动画https://codepen.io/kh-mamun/f...用css写的房子换肤交互效果https://codepen.io/fdsea/full...立方体交互动画https://codepen.io/kunukn/ful...纯css画的3d树https://codepen.io/kunukn/ful..... 查看详情
codepen每日精选（2018-4-9）
...页面。前端工程师的技能树https://codepen.io/SoyEva/ful...纯css写的咖啡机动画https://codepen.io/jenningscr...从各种视角观察纸盒的交互动画https://codepen.io/dabalose7e...纯css画的海报https://codepen.io/lauraculha...纯css写的唱片旋转动画https://codepen.io/... 查看详情
如何用纯css3制作进度条
参考技术A条纹进度条若要制作条纹进度条我应该.bar-fill重新命名.bar-fill-stripes我使用backgrou-image属性linear-gradient同声明颜色剩余CSS3画效述相同看面代码：.bar-fill-stripesheight:15px;display:block;background:#e74c3c;width:0;border-radius:8px;background-... 查看详情
纯css的滑块开关按钮
之前在项目中使用滑块开关按钮，纯css写的，不考虑兼容低版本浏览器，先说下原理：使用 checkbox的选中 checked属性改变css伪类样式，一定要使用-webkit-appearance:none;先清除checkbox的默认样式，否则写其他的样式不起作... 查看详情