摘要： 效果演示(加快了100倍)实现原理利用CSS3的transform-origin 及transform 完成以上效果。代码及说明 1 67 68 69 70 71 第2-22行，定义了旋转的中性点及旋转的角度；第23-33行，定义了时针的效果，同时定义了43200秒旋转一周，即12小时旋转360度；... 阅读全文

摘要： 效果演示实现原理使用3个div（一个是顶部栏，一个是左侧栏，一个是右侧栏）；使用checkbox作为判断是否显示和隐藏右侧栏，点击显示和隐藏label实现最终效果。代码说明css 设置了顶部div，height为30px，width为100%，底部有边框的效果；设置了左侧div，top为32px，... 阅读全文

摘要： 效果如下实现原理：利用CSS3的@keyframes规则创建动画效果；使用CSS3的animation效果完成滚动切换。代码说明：样式表中@-webkit-keyframes及@keyframes定义了旋转360度的操作；样式表中.border div定义了div的基本样式，红色的10px圆形；10... 阅读全文

摘要： 先看效果abcd这个效果也比较简单，利用keyframes对文字的大小、透明度及颜色做循环显示。CSS 1 HTML1 abcd 阅读全文

摘要： 先看效果（把鼠标移上去看看）abcd这个效果很简单，就是移动文字的位置模拟出震动的效果。Css 1 Html1 abcd 阅读全文

摘要： 先看例子This is a test 1.This is a test 2.This is a test 3.This is a test 4.This is a test 5.This is a test 1.如果看完上一篇纵向滚动的朋友，就很容易理解横向滚动的实现方式了。实现原理：1. 利用CSS3的@keyframes规则创建动画效果；2. 使用CSS3的animation效果完成滚动切换。 1 @-webkit-keyframes scrollText2 { 2 0%{ 3 -webkit-transform: translateX(0px); 4 } ... 阅读全文

摘要： 老惯例，先看例子。This is a test 1.This is a test 2.This is a test 3.This is a test 4.This is a test 5.This is a test 1.实现原理：1. 利用CSS3的@keyframes规则创建动画效果；2. 使用CSS3的animation效果完成滚动切换。CSS代码 1 @-webkit-keyframes scrollText1 { 2 0%{ 3 -webkit-transform: translateY(0px); 4 } 5 20%{ 6 -... 阅读全文

摘要： 先看效果，鼠标移上去看看。backfront1. 本实例需要以下元素 a. 容器BOX b. 默认显示元素FRONT c. 翻转显示元素BACK2. 容器BOX的Height为200px，Width为200px；1 .box2{2 position: relative;3 top: 20px;4 left: 20px;5 width: 200px;6 height: 200px;7 border: 1px solid #ccc;8 overflow: hidden;9 }3. 默认显示和翻转显示的元素Height为100%，Width为100%，Css中包含翻... 阅读全文

摘要： 先看看效果，把鼠标移上去看看。backfront1. 本实例需要以下元素： a. 外容器 box b. 内容器 border c. 默认显示内容 front d. 滑动内容 back2. 外容器BOX的Height为200px，Width为200px；1 .box1{2 position: relative;3 top: 100px;4 left: 100px;5 width: 200px;6 height: 200px;7 border: 1px solid #ccc;8 overflow: hidden;9 }3. 内容器BORDER的Height为20... 阅读全文

摘要： 最终效果制作步骤1.边框CSS及Html代码显示效果2.向左的标志CSS及Html代码，增加的代码在黄色范围内显示效果方向不对了，马上修改一下方向，逆时针旋转45度调整一下CSS及Html代码这回再看看效果这样就对了3.用类似的方法做出向右和关闭的效果，大功告成。完整代码： 1 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 一定要使劲点一下 阅读全文