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 中创建动画, ...
随机推荐
- ANDROID PAD版本号 PHONE版本号 源代码有什么 差别?
ANDROID PAD版本号 PHONE版本号 源代码有什么 差别? 直接把frameworks/base/core/res/res/values/config.xml里面的<bool name ...
- 于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. ...
- Cordic 算法之 反正切
在通信的算法中,常采用Cordic算法之一,知道角度产生正交的的正弦余弦, 或者知道正弦和余弦求角度,求反正切. 1. 求正弦和余弦值. 方法:旋转角度,得到正弦余弦值: 再旋转角度,到达下一个正弦余 ...
- Redis源代码分析(十)--- testhelp.h小测试框架和redis-check-aof.c
日志检测
周期分析struct结构体redis代码.最后,越多越发现很多的代码其实大同小异.于struct有袋1,2不分析文件,关于set集合的一些东西,就放在下次分析好了,在选择下个分析的对象时,我考虑了一下 ...
- 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 ...
- TinyMCE实现简单的本地上传
TinyMCE这个东西很多地方再用,不过我以前一直没用过,最近才接触,因为有一套现成的metro风格的皮肤,仅此而已,不过最终如何调用还是我得来实现.其他的都好说,网上的资料一大把一大把的,唯独这个本 ...
- C++ Primer Plus 文章17章 进,输出和文件
文章17章 进.输出和文件 1.当到达输入句子.他将刷新输出缓冲区满输出电流 2.streambuf分类 它提供了用于各种操作的一个缓冲 ios_base类表示流的一般特征 ios基础的类ios_ba ...
- poj 1328 Radar Installation (简单的贪心)
Radar Installation Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 42925 Accepted: 94 ...
- google面试题,男孩男女比例?
Google面试题: 在一个重男轻女的国家里,每一个家庭都想生男孩.假设他们生的孩子是女孩.就再生一个,直到生下的是男孩为止,这种国家.男女比例会是多少? 答案:1:1 分析: 出生男女概率是50% ...
- STL algorithmi算法s_sorted和is_sorted_until(28)
is_sort原型: ::is_sorted default (1) template <class ForwardIterator> bool is_sorted (ForwardIte ...