随笔分类 - CSS3
摘要：偶然发现一个很有意思的加载动画，效果如下： 乍一看以为是个绿色的gif图，其实是个白底的gif，而在动的两个小正方形是透明的，背景色绿色，才会看起来是绿色小gif。 挺奇妙的。 代码： <div style="display: inline-block; background-color: #99c
阅读全文
摘要：使用CSS3 Sprite（雪碧图）可以制作帧动画，如下 效果： 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 200px; /* 单帧显示宽度 */ heig
阅读全文
摘要：.div{ background: #233557; background-image: linear-gradient(-45deg,rgba(150,150,150,0.1) 25%,rgba(150,150,150,0.2) 0,rgba(150,150,150,0.2) 50%,rgba(1
阅读全文
摘要：偶然发现最新版本的Chrome浏览器无法识别margin:0 -.8em;这样的写法：即左右margin同时为负值。 正常效果是这样的： html代码：（与话题无关的代码已删除） 原本的CSS： 我们知道，margin:0 -.8em，相当于： Chrome版本及其效果： 旧版本： 最新版本： 可以
阅读全文
摘要：一个简单的开关组件 依赖：jquery.js CSS JS HTML 注意：
阅读全文
摘要：前言 日期时间选择器可以直接使用bootstrap-datetimepicker.js插件，但是却很难找到好用的时长选择器，什么是时长选择器呢？时间选择器和时长选择器的区别： 时间选择器：选择24小时中某个时间点或者某段时间，datetimepicker效果如下： 时长选择器：选择时分秒长度，例如录
阅读全文
摘要：前言 IP输入组件的功能包括： 效果如下： 依赖 CSS JS HTML 最基本的IP输入组件： MAC地址输入组件： data-plugin="ipinput"：激活功能 data-letterlimit="2"：修改字符长度限制，每个输入框达到这个长度，则自动跳到下一个框（如果有下一个框） 手动
阅读全文
摘要：1、【最简单的文本长度限制】超出部分直接裁切，并在后面加上【...】 效果： 代码：（需要先引入jquery.js） 2、支持点击切换的两种文本限制组件 使用1：【单行溢出隐藏/自动换行】 效果2：【js裁切文本】 其中，data-link为true时则支持点击切换
阅读全文
摘要：效果 HTML * 注意input的id和label的for必须一致 CSS
阅读全文
摘要：::-webkit-scrollbar-track { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0); } ::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.05); border-radius: 10px; -webkit-...
阅读全文
摘要：做这个表格的时候遇到 下面的 td 单元格遮挡 上面单元格子元素的问题： 表格原本是这样的： 这两个单元格就是咱们的主角。 问题： 上面的 td 有一个 ul 用绝对定位做下拉菜单 我们要的当然是菜单显示时要处于顶层。但是却出现下面的问题： 可以看出下面的那个 td 遮挡了 菜单。 翻阅资料才知道，
阅读全文
摘要：动画效果可以参照animate.css 注：图片默认是不动的，当鼠标经过的时候才会动。原理很简单--通过js，添加鼠标经过事件，鼠标经过时，把当前元素存放在“data-in”里的“swing”添加到class里，前提animated这个类一定要加上，要不然动画不起作用。 1、引入animate.cs
阅读全文