自定义常用input表单元素的第三篇，自定义一个Switch开关，表面上看是和input没关系，其实这里采用的是checkbox的checked值的切换。同样，采用css伪类和“+”css选择器为思路，下面是预览图： 下面先放HTML代码，看下DOM结构： DOM结构没什么特别的，就是一个常用的ch ...
分类：
Web程序 时间：
2018-09-11 21:30:14
阅读次数：
608
一般超出文本显示分为两种：单行超出文本和多行超出文本省略号显示，实现方式使用纯css实现： ...
分类：
Web程序 时间：
2018-09-10 21:22:53
阅读次数：
260
话不多说，直入主题。众所周知原生的checkbox复选框、radio单选按钮、select选择框，不同浏览器差别较大，最重要的一点是不怎么好看，如果直接拿原生用，可能会影响整体的美观。项目中用的第三方UI这些都已经很完备，但是在小型项目不想采用第三方UI或者使用的是Bootstrap等没有定制的ch ...
分类：
Web程序 时间：
2018-09-05 21:42:03
阅读次数：
572
昨天因为项目中想要把二级联动菜单改成三级联动菜单，所以我就单独写了一个tab导航栏，用纯css的方式实现的三级联动。一开始我想着可以用js实现，但是js的hover事件和mouseenter,mouseover,mouseleave,mouseout事件都会有一个问题，就是当鼠标移出区域块儿的时候， ...
分类：
Web程序 时间：
2018-08-29 14:44:31
阅读次数：
549
序言：这是一篇非常有趣的文章，作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法。因为案例本身比较复杂，而本人水平有限，翻译必有不恰当之处，望指正。 原文： "How the Roman Empire Made Pure CSS Connect 4 Possibl ...
分类：
Web程序 时间：
2018-08-28 23:43:39
阅读次数：
206
之前在项目中使用滑块开关按钮，纯css写的，不考虑兼容低版本浏览器，先说下原理： 使用 checkbox 的 选中 checked 属性改变css 伪类样式， 一定要使用-webkit-appearance: none; 先清除checkbox的默认样式 ，否则写其他的样式不起作用； 好，不多说，直 ...
分类：
Web程序 时间：
2018-08-28 00:52:28
阅读次数：
259
酷炫的动画效果往往更能吸引眼球，下面我将分享纯CSS中，hover的时候出现下划线动态飞入的技巧。 1.下划线从左侧飞入： 步骤：首先是设置div为相对位置（relative，主要用于before子元素的定位。因为绝对位置的定位要求其父元素的position属性值不能为static，而relativ ...
分类：
其他好文 时间：
2018-08-26 22:05:27
阅读次数：
286
在一个网页上，尤其是导航栏文字与文字之间，大多数情况下都会有分隔符，也就是文字之间的一个小竖线，这个小小的分隔符，每个网站都有不同的样式，常用的写法就是用标签的边框，这个写法也比较简单，用起来也方便，但是，却满足不了越来越绚丽的网页，很多情况下用标签的边框是写不出来现有要的样式的，那就需要其他的写法 ...
分类：
Web程序 时间：
2018-08-12 20:03:03
阅读次数：
1637
概述 概述 纯CSS实现蜂窝六边形的个性相册 纯CSS实现蜂窝六边形的个性相册 详细 详细 代码下载：http://www.demodashi.com/demo/12804.html 此案例主要用到CSS3的 transform 和 transition属性，还有nth-child() 选择器 一、 ...
分类：
Web程序 时间：
2018-08-10 10:50:53
阅读次数：
255
1. 纯CSS气泡框实现方法探究 2. vue组件系列--气泡卡片 ...
分类：
Web程序 时间：
2018-08-07 21:26:52
阅读次数：
188
