1.css3动画属性分析(2016-5-11)

1.transition: 规定属性变换规则,可以这样讲。transition(a,b,c,d);

a:要变换的属性;

b:过渡时间;

c:运动方式;

d:需要延迟多久开始执行该动画

ex:<div class="exdiv">测试div</div>

.exdiv{width:200px;height:100px; transition:width 2s ease-in 2s}

div:hover{width:500px};

该实例说明党鼠标移入div时,延迟2s后该div宽度会2s内变为500px;

2.transform:我们能够对元素进行移动、缩放、转动、拉长或拉伸。

改属性2d变换有以下属性

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()

translate(x,y):对元素进行位移;

ex:<div class="exdiv">测试div</div>

.exdiv{transform:translate(50px,100px)}表示div从当前位置left移动50px,top移动100px;

rotate(x):对元素进行角度旋转

.exdiv{transform:rotate(50deg)}标书div顺时针旋转50个角度

scale(x,y):对元素进行角度旋转

.exdiv{transform:scale(2,4)}表示div宽度增加到原始尺寸的2倍,高度增加到原始尺寸的4倍

skew(x,y) 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:

.exdiv{ transform:skew(30deg,20deg)} 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。

html5动画效果示例:

1.tab切换

<style>
/**css3选项卡**/
.tab-main{ position:relative; width:300px; height:300px; margin:30px;}
.tab-main input{ position:relative; float:left; opacity:0; z-index:9999; width:33.33%; height:30px; background:#ccc; border-radius:5px 5px 0 0;}
.tab-main .content{ position:absolute; top:30px; width:300px; height:200px; border-top:none;border:1px solid #ccc;}
.tab-main > .ys{ transiton:all .5s; cursor:alias; text-align:center; line-height:30px; font-size:14px; position:absolute; top:0;width:100px; height:30px; background-color:#ccc; border-radius:5px 5px 0 0;}
#tab-1+.ys{ left:0;}
#tab-2+.ys{ left:33.33%;}
#tab-3+.ys{ left:66.66%;}
.tab-main > input:checked+.ys{ height:27px; background-color:#fff; color:#09F; border-bottom:3px solid #09F}
.tab-main > .content section{ display:none}
#tab-1:checked~.content #tab-item-1{ display:block}
#tab-2:checked~.content #tab-item-2{ display:block}
#tab-3:checked~.content #tab-item-3{ display:block}
</style> <div class="tab-main">
<input type="radio" id="tab-1" name="tab" checked>
<span href="#tab-item-1" class="ys">首页</span> <input type="radio" id="tab-2" name="tab">
<span href="#tab-item-2" class="ys">分页1</span> <input type="radio" id="tab-3" name="tab">
<span href="#tab-item-3" class="ys">分页2</span>
<div class="line ease"></div> <div class="content">
<section id="tab-item-1"><div>首页 介绍</div></section>
<section id="tab-item-2"><div>分页1介绍</div></section>
<section id="tab-item-3"><div>分页2介绍</div></section>
</div>
</div>

css3动画实例测试的更多相关文章

  1. css3 动画实例

    animation 动画 animation-duration 代码实例: <!DOCTYPE html> <html> <head> <meta chars ...

  2. css3动画实例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. CSS3动画详解(结合实例)

    一.使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时,浏览器会不停的执行重排(reflow)和重绘(repaint) 可以避免占用JS主线程 这边就不细 ...

  4. css3动画入门transition、animation

    css3动画 transition.animation CSS3 transition demo <!DOCTYPE html> <html> <head> < ...

  5. CSS3动画animation认识,animate.css的使用

    CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...

  6. 使用jquery封装的动画脚本(无动画、css3动画、js动画)

    自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出)  slideUpDown(上下滑动)  slideLeftRight(左右滑动)  fadeSlid ...

  7. 显示层封装及实现与优化(无动画+css3动画+js动画)

    showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  8. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  9. CSS3 动画

      通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. CSS3 动画 CSS3 @keyframes 规则 如需在 CSS3 中创建动画, ...

随机推荐

  1. ANDROID PAD版本号 PHONE版本号 源代码有什么 差别?

    ANDROID PAD版本号 PHONE版本号 源代码有什么 差别? 直接把frameworks/base/core/res/res/values/config.xml里面的<bool name ...

  2. 于ubuntu-kylin14.10下一个,无法使用apt-get具( libc6-i386 : 赖: libc6 (= 2.15-0ubuntu10.5) 但 2.19-0ubuntu6 一个已)

    这篇文章有xhz1234(徐洪志)书写.转载请注明出处. http://blog.csdn.net/xhz1234/article/details/37044531 作者:徐洪志 背景:安装wine. ...

  3. Cordic 算法之 反正切

    在通信的算法中,常采用Cordic算法之一,知道角度产生正交的的正弦余弦, 或者知道正弦和余弦求角度,求反正切. 1. 求正弦和余弦值. 方法:旋转角度,得到正弦余弦值: 再旋转角度,到达下一个正弦余 ...

  4. Redis源代码分析(十)--- testhelp.h小测试框架和redis-check-aof.c 日志检测

    周期分析struct结构体redis代码.最后,越多越发现很多的代码其实大同小异.于struct有袋1,2不分析文件,关于set集合的一些东西,就放在下次分析好了,在选择下个分析的对象时,我考虑了一下 ...

  5. Pro Aspnet MVC 4读书笔记(5) - Essential Tools for MVC

    Listing 6-1. The Product Model Class using System; using System.Collections.Generic; using System.Li ...

  6. TinyMCE实现简单的本地上传

    TinyMCE这个东西很多地方再用,不过我以前一直没用过,最近才接触,因为有一套现成的metro风格的皮肤,仅此而已,不过最终如何调用还是我得来实现.其他的都好说,网上的资料一大把一大把的,唯独这个本 ...

  7. C++ Primer Plus 文章17章 进,输出和文件

    文章17章 进.输出和文件 1.当到达输入句子.他将刷新输出缓冲区满输出电流 2.streambuf分类 它提供了用于各种操作的一个缓冲 ios_base类表示流的一般特征 ios基础的类ios_ba ...

  8. poj 1328 Radar Installation (简单的贪心)

    Radar Installation Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 42925   Accepted: 94 ...

  9. google面试题,男孩男女比例?

    Google面试题: 在一个重男轻女的国家里,每一个家庭都想生男孩.假设他们生的孩子是女孩.就再生一个,直到生下的是男孩为止,这种国家.男女比例会是多少? 答案:1:1 分析:  出生男女概率是50% ...

  10. STL algorithmi算法s_sorted和is_sorted_until(28)

    is_sort原型: ::is_sorted default (1) template <class ForwardIterator> bool is_sorted (ForwardIte ...