查看效果：http://hovertree.com/texiao/css3/4/效果图： 代码如下： 转自：http://hovertree.com/h/bjaf/hvtplane.htm 参考：http://hovertree.com/h/bjaf/kqud99m6.htm 更多特效：http:/ ...
分类：
Web程序 时间：
2016-04-06 11:13:22
阅读次数：
173
有一些前沿的电商网站已经开始使用3D模型来展示商品并支持在线定制，而其中图书的展示是最为简单的一种，无需复杂的建模过程，使用图片和CSS3的一些变换即可实现更好的展示效果，简洁而实用。书本的3D模型是所有商品中最为简单的，因为其本质上就是一个立方体（cube），只是带有封面/封底和左侧封条。所以要构造一个3D书本展示，问题就被分解为构造一个立方体+旋转+图片背景。...
分类：
Web程序 时间：
2016-03-19 19:49:11
阅读次数：
213
日食现象是月亮挡在了地球和太阳之间，也就是月亮遮挡住了太阳。所以要构造日食，我们需要2个对象：一个代表月亮，一个代表太阳。
我们把整个日食过程分解为3个阶段：1. 缓慢移入 2. 短暂停留 3. 缓慢移出。在此期间，会产生3个彼此关联的动画。首先是月亮的位置移动，我们通过改变月亮的X坐标（left或right属性值）来实现（注意把太阳和月亮均设置成绝对定位）。其次太阳会逐步呈现出圆晕的光线效果，我...
分类：
Web程序 时间：
2016-03-19 16:33:11
阅读次数：
259
本来打算还做一下系统时间动态时钟，但是奔着纯CSS3的目的去就不加了。。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>css3时钟</title> 6 <style> 7 *{ 8 m
分类：
Web程序 时间：
2016-02-29 19:44:27
阅读次数：
207
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>meteor</title> 6 <style> 7 *{ 8 padding:0; 9 margin:0; 10 } 11 body{ 1
分类：
Web程序 时间：
2016-02-29 18:08:57
阅读次数：
210
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>squeezebox</title> 6 <style> 7 *{ 8 padding:0; 9 margin:0; 10 } 11 bod
分类：
Web程序 时间：
2016-02-29 18:01:25
阅读次数：
242
我们可以使用SVG、Canvas、CSS3或者背景图片来实现五角星图案及其悬停效果。使用CSS3是最为简单和高效的方法，并且代码容易调试和维护。CSS3引入的伪元素和变换特性使得实现五角星图形非常简单。...
分类：
Web程序 时间：
2016-02-22 20:54:13
阅读次数：
260
前端开发whqet,csdn,王海庆,whqet,前端开发专家上一篇的《纯CSS3文字效果推荐》文章里面推荐了8款纯css实现的文字效果，当中3d文字效果最为流行，限于篇幅只展示了其3D实现原理，没有考虑代码的复用性和可移植性。今天来补充下。顺便领略sass的强大功能，请大家摩摩拳擦擦掌。开工咯！案
分类：
Web程序 时间：
2016-02-20 10:22:12
阅读次数：
228
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>纯CSS实现图片切换</title> 6 <style> 7 *{margin:0; padding:0;} 8 li{ list-style:none;} 9
分类：
Web程序 时间：
2016-02-16 20:30:04
阅读次数：
226
效果：http://hovertree.com/texiao/css3/1/本效果主要使用text-shadow实现.参考：http://hovertree.com/h/bjaf/css3_text_effect.htm代码如下：超炫CSS3文字特效集锦DEMO演示 - 何问起OutlinedAOu...
分类：
Web程序 时间：
2016-01-27 00:50:28
阅读次数：
262
