图片hover之后等比例放大，鼠标移开又等比例恢复原状，同时带有动画过渡效果 使用CSS3中的transform属性； ...
分类：
Web程序 时间：
2020-04-01 00:32:37
阅读次数：
96
正方体4个面广告滚动： 纵向4个面为广告图片，通过动画自动旋转播放显示如图： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; paddi ...
分类：
Web程序 时间：
2020-03-31 22:53:30
阅读次数：
96
网页效果中经常会用到图片的hover效果，ImageHover.css 这个库为我们提供了多种的效果。 兼容性 插件是使用css3书写的，所以最好是对css3支持比较好的浏览器。如果需要考虑到兼容性问题，那么建议使用我自己写的jq版效果，虽然效果单一，但是兼容性更好。 效果演示地址 Demo：htt ...
分类：
Web程序 时间：
2020-03-31 14:04:04
阅读次数：
79
text-shadow 定义文本阴影或模糊效果。text-shadow属性在css2中已经定义了，但是在css3中又重新定义了，并且增加了不透明度的效果。 基本语法 text-shadow：none | <shadow> [ , <shadow> ]* <shadow> = <length>{2,3 ...
分类：
Web程序 时间：
2020-03-30 23:25:00
阅读次数：
120
一、box-decoration-break CSS3新增的box-decoration-break属性可指定行内非替换元素在跨行、跨列或跨页时的样式渲染，它包含两个值： （1）slice：默认值，盒子会被分割成多部分。 （2）clone：断开的各个盒子会单独渲染。 下面用一个示例来演示两种的区别， ...
分类：
Web程序 时间：
2020-03-30 09:58:35
阅读次数：
107
用CSS实现一个简单的幻灯片效果页面，第一反应是利用CSS3的animation。不过为了兼容浏览器，记得加各浏览器前缀（“chrome和safira：-webkit-”、“firefox:-moz-”、“opera:-o-”），我最开始写的时候忘记加浏览器前缀，在chrome中一直没有任何显示。下 ...
分类：
Web程序 时间：
2020-03-29 12:42:35
阅读次数：
110
move.js是一款简单的支持CSS3动画的JavaScript库，对于对CSS3的操作不是很熟悉的人来说，使用move.js提供的方法操作CSS3动画更简单方便。 要想使用move.js提供的方法，首先应在我们的HTML页面中引入move.js： <!DOCTYPE html> <html> <h ...
分类：
Web程序 时间：
2020-03-27 20:01:25
阅读次数：
171
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 ul{ 12 ...
分类：
Web程序 时间：
2020-03-26 21:41:22
阅读次数：
104
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3过渡模块-手风琴效果</title> 6 <style> 7 *{margin: 0;padding: 0;} 8 ul{ 9 wi ...
分类：
Web程序 时间：
2020-03-26 19:23:16
阅读次数：
80
transform 和 translate transform指变换、变形，是css3的一个属性，和其他width，height属性一样 translate 是transform的属性值，是指元素进行2D变换，2D变换就是指，元素以当前位置（0,0）按照x轴的方向移动多少，按照y轴的方向移动多少 例 ...
分类：
Web程序 时间：
2020-03-25 10:45:29
阅读次数：
90
