css3动画实例测试
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动画实例测试的更多相关文章
- css3 动画实例
animation 动画 animation-duration 代码实例: <!DOCTYPE html> <html> <head> <meta chars ...
- css3动画实例
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- CSS3动画详解(结合实例)
一.使用CSS3动画代替JS动画 JS动画频繁操作DOM导致效率非常低 在频繁的操作DOM和CSS时,浏览器会不停的执行重排(reflow)和重绘(repaint) 可以避免占用JS主线程 这边就不细 ...
- css3动画入门transition、animation
css3动画 transition.animation CSS3 transition demo <!DOCTYPE html> <html> <head> < ...
- CSS3动画animation认识,animate.css的使用
CSS动画 可以取代js动画 在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! -------------------------------------------- ...
- 使用jquery封装的动画脚本(无动画、css3动画、js动画)
自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出) slideUpDown(上下滑动) slideLeftRight(左右滑动) fadeSlid ...
- 显示层封装及实现与优化(无动画+css3动画+js动画)
showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
- CSS3 动画
通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. CSS3 动画 CSS3 @keyframes 规则 如需在 CSS3 中创建动画, ...
随机推荐
- Model绑定
Model绑定 在前面的几篇文章中我们都是采用在URI中元数据类型进行传参,实际上ASP.NET Web API也提供了对URI进行复杂参数的绑定方式--Model绑定.这里的Model可以简单的理解 ...
- 64位sql server 如何使用链接服务器连接Access
原文:64位sql server 如何使用链接服务器连接Access 测试环境 操作系统版本:Windows Server 2008 r2 64位 数据库版本:Sql Server 2005 64位 ...
- 章节2:SQL之多表连接
原文:章节2:SQL之多表连接 Sql的多表连接关系有:内连接.外连接和交叉连接. 先建立两个用于演示的表: TB_Characters: Id Character 1 内向 2 外向 3 中性性格 ...
- JS日期显示格式 yyyy-MM-dd hh:mm:ss
1.字符串转换为日期 Date.parse() 可以把 Date.toString() 和 Date.toUTCString()返回的字符串转换为日期类型 2.日期对象转换 ...
- mysql子查询慢的问题
当你在用explain工具查看sql语句的运行计划时.若select_type 字段中出现"DEPENDENT SUBQUERY"时,你要注意了.你已经掉入了mysql子查询慢 ...
- Windows Server 2008 网管数据采集 努力做“日拱一卒“
Windows Server 2008R2系统管理[刘道军主讲MCITP课程] http://edu.51cto.com/course/course_id-510.html Windows Serve ...
- oracle 11g 自己主动调整
--:自己主动调教计划 begin dbms_workload_repository.create_snapshot(); end; select /*+ result_cache */ coun ...
- cocos2d-x 3.1.1 学习笔记[4]GridActions 网格动画
文章写的 http://blog.csdn.net/zhouyunxuan 老样子.见代码. //GridActions can only used on NodeGrid auto nodeGri ...
- 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 ...
- eclipese with gdbserver and Jlink configuration
最近的项目,很感动于linux和gdbserver内容,I think must write something to record it . 各位对不起,图片挂了.. Ok, at first I' ...