效果：在任意HTML标签上增加样式类 f-color-control 就可以为此元素增加hover和avtive时颜色的变化; 代码如下： ...
分类：
Web程序 时间：
2017-03-08 11:04:27
阅读次数：
2148
一、滑动菜单 1、代码： <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>纯CSS3垂直菜单 菜单项滑动动画DEMO演示</title> <link rel="stylesheet" type="tex ...
分类：
Web程序 时间：
2017-02-06 11:13:10
阅读次数：
336
关键技术点和原理： 原理就是把 checkbox或 radio 给隐藏掉 ，然后给选框 绑定一个label标签。 然后用label标签作为容器，在里面放一个：before或一个after 用before模拟选框的框，用after来模拟选框的填充 通过 来确定是否选中复选框，如果checked就把af ...
分类：
Web程序 时间：
2017-01-28 21:18:16
阅读次数：
314
css3 鼠标:hover效果会平滑过渡，但鼠标离开，效果消失的太生硬，能不能和：hover一样平滑过渡? 最终实现效果：鼠标划入img上去,b标签以遮罩层的方式出现 鼠标移出img,b标签以遮罩层的方式平滑过渡消失 要想利用hover伪类来实现以上效果， 首先:b标签必须在鼠标划入的元素里面，即b ...
分类：
Web程序 时间：
2017-01-20 17:45:12
阅读次数：
456
这是补充HTML5基础知识的系列内容，其他为： 一、HTML5-- 新的结构元素 二、HTML5-- figure、time、details、mark 三、HTML5-- details活学活用 四、HTML5-- 现存元素的变化 五、HTML5 -- Web表单 今天继续学习Web表单相关的内容， ...
分类：
Web程序 时间：
2017-01-20 07:26:28
阅读次数：
730
这是补充HTML5基础知识的系列内容，其他为： 一、HTML5-- 新的结构元素 二、HTML5-- figure、time、details、mark 三、HTML5-- details活学活用 四、HTML5-- 现存元素的变化 五、HTML5 -- Web表单 今天继续学习Web表单相关的内容， ...
分类：
Web程序 时间：
2017-01-20 07:16:13
阅读次数：
258
以前制作网页动画一般使用javascript，现在已经有越来越多动动画使用纯CSS实现，并且动画的控制也可以使用CSS3实现，因为CSS 3来了，CSS 3的动画功能确实强大。以下是一个纯CSS3制作的风车旋转动画，而且也用CSS 3控制速度。体验效果：http://hovertree.com/te ...
分类：
Web程序 时间：
2017-01-09 20:11:32
阅读次数：
300
源于前段时候微信小程序最初火爆公测时段，把以前用 Canvas 实现的大转盘抽奖移植成微信小程序，无奈当时小程序对 Canvas 支持不够完善，只好降低用 CSS3 实现。虽然比不上 Canvas 绘图的绚丽，但也总算完成了一个抽奖的 Demo，详见：https://github.com/giveb ...
分类：
Web程序 时间：
2017-01-09 00:43:16
阅读次数：
410
源于前段时候微信小程序最初火爆公测时段，把以前用 Canvas 实现的大转盘抽奖移植成微信小程序，无奈当时小程序对 Canvas 支持不够完善，只好降低用 CSS3 实现。虽然比不上 Canvas 绘图的绚丽，但也总算完成了一个抽奖的 Demo，详见：https://github.com/giveb ...
分类：
Web程序 时间：
2017-01-09 00:03:43
阅读次数：
446
之前在网上看到一些用纯CSS3实现的酷炫效果，以为实现起来比较困难，于是想看看具体是怎么实现的。 一、笑脸猫动画 实现效果如下： 这个实现起来确实比较麻烦，很多地方需要花时间，有耐心地调整。 1.先看下页面结构： 2.再看css部分 1.先看脸部face: 主要是要画出椭圆形，width和heigh ...
分类：
Web程序 时间：
2017-01-07 00:25:48
阅读次数：
251
