1.css3动画属性分析(2016-5-11)
1.transition: 规定属性变换规则,可以这样讲。transition(a,b,c,d);
a:要变换的属性;
b:过渡时间;
c:运动方式;
d:需要延迟多久开始执行该动画
ex:<div class="exdiv">测试div</div>
.exdiv{200px;height:100px; transition:width 2s ease-in 2s}
div:hover{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>