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. Model绑定

    Model绑定 在前面的几篇文章中我们都是采用在URI中元数据类型进行传参,实际上ASP.NET Web API也提供了对URI进行复杂参数的绑定方式--Model绑定.这里的Model可以简单的理解 ...

  2. 64位sql server 如何使用链接服务器连接Access

    原文:64位sql server 如何使用链接服务器连接Access 测试环境 操作系统版本:Windows Server 2008 r2 64位 数据库版本:Sql Server 2005 64位 ...

  3. 章节2:SQL之多表连接

    原文:章节2:SQL之多表连接 Sql的多表连接关系有:内连接.外连接和交叉连接. 先建立两个用于演示的表: TB_Characters: Id Character 1 内向 2 外向 3 中性性格 ...

  4. JS日期显示格式 yyyy-MM-dd hh:mm:ss

     1.字符串转换为日期        Date.parse()       可以把 Date.toString() 和 Date.toUTCString()返回的字符串转换为日期类型 2.日期对象转换 ...

  5. mysql子查询慢的问题

      当你在用explain工具查看sql语句的运行计划时.若select_type 字段中出现"DEPENDENT SUBQUERY"时,你要注意了.你已经掉入了mysql子查询慢 ...

  6. Windows Server 2008 网管数据采集 努力做“日拱一卒“

    Windows Server 2008R2系统管理[刘道军主讲MCITP课程] http://edu.51cto.com/course/course_id-510.html Windows Serve ...

  7. oracle 11g 自己主动调整

    --:自己主动调教计划 begin   dbms_workload_repository.create_snapshot(); end; select /*+ result_cache */ coun ...

  8. cocos2d-x 3.1.1 学习笔记[4]GridActions 网格动画

    文章写的  http://blog.csdn.net/zhouyunxuan 老样子.见代码. //GridActions can only used on NodeGrid auto nodeGri ...

  9. hdu 2141 Can you find it?(二分查找变例)

    Problem Description Give you three sequences of numbers A, B, C, then we give you a number X. Now yo ...

  10. eclipese with gdbserver and Jlink configuration

    最近的项目,很感动于linux和gdbserver内容,I think must write something to record it . 各位对不起,图片挂了.. Ok, at first I' ...