一、2D效果
1.translate(xpx,ypx)、translateX(xpx),translateY(ypx)
右平移xpx,左平移ypx
<!DOCTYPE html> transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ |
结果:
2.rotate 旋转
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 100px; height: 100px; border: 1px solid red; background: #FF0000; box-shadow: 0px 0px 3px aqua; } #translate1{ transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ } </style> </head> <body> <div id="translate">translate</div> <div id="translate1">translate1</div> </body> </html> |
结果:
3.scale(x,y)
x > 1,宽度放大x倍;x < 1,宽度缩小x倍;
y > 1,高度放大x倍; y < 1,高度缩小y倍;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 100px; height: 100px; border: 1px solid red; background: #FF0000; box-shadow: 0px 0px 3px aqua; } #translate1{ -ms-transform:scale(2,3); /* IE 9 */ -webkit-transform: scale(2,3); /* Safari */ transform: scale(2,2); /* 标准语法 */ } </style> </head> <body> <div id="translate">translate</div> <div id="translate1">translate1</div> </body> </html> |
结果:
放大 缩小
4.skew 倾斜
skewX: 相当于y轴绕中心逆时针旋转 n°
skewY: 相当于x轴绕中心顺时针旋转 n°
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 100px; height: 100px; border: 1px solid red; background: #FF0000; box-shadow: 0px 0px 3px aqua; } #translate1{ transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(20deg,20deg); /* Safari and Chrome */ } </style> </head> <body> <div id="translate">translate</div> <div id="translate1">translate1</div> </body> </html> |
结果:
x=20deg,y=20deg x=20deg y=20deg
5.matrix就不介绍,我没有使用明白,等明白了在介绍
总结:
二、3D效果
1.ratateX(n deg) 按照X轴方向旋转
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 100px; height: 100px; border: 1px solid red; background: #FF0000; box-shadow: 0px 0px 3px aqua; } #translate1{ transform: rotateX(60deg); -webkit-transform: rotateX(60deg); /* Safari 与 Chrome */ } </style> </head> <body> <div id="translate">translate</div> <div id="translate1">translate1</div> </body> </html> |
结果:
60度 90度 180度
2.ratateX(n deg) 按照Y轴方向旋转 这里就不写了,和上面一样
三、过渡 transition
1.transition
transition: 属性 n秒,属性 n秒,属性 n秒,属性 n秒,属性 n秒 ;(属性可以是color width height transform等)
接下来展示一些我做的一个效果
要点:
①hover必要的,放上鼠标之后的效果
②transition 过渡的元素和时间设置
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { color: white; width: 50px; height: 50px; background: chartreuse; box-shadow: 0px 0px 3px aqua; } #translate1{ transition:background 1.5s, 1s, width 1s, height 1s, transform 1s; -webkit-transition:background 1.5s,font-size 1s, width 1s, height 1s, -webkit-transform 1s; } #translate1:hover{ background: #00FFFF; font-size: 25px; width: 100px; height: 100px; -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */ transform: rotate(360deg); } </style> </head> <body> <div id="translate1"> <span><b>CSS3</b></span> <br> 过渡 </div> </body> </html> |
效果:我不会做动态图,有会的小伙伴可以教我一下,坤儿在这先谢过!(中间还有过效果看不到,可以去http://www.runoob.com/css3/css3-transitions.html来看那个图,和我的效果一样)
之前 之后
2.等待属性,鼠标放在元素上多长事件后,出现过渡效果
transition: 属性 n秒,属性 n秒,属性 n秒,属性 n秒,属性 n秒 ,linear 2s;点击两秒之后,出现过渡效果。
四、动画效果(听炫酷的哦)
要点:
1.@keyframes 定义动画
@keyframes myfirst{
0%{};
100%{};
}
2.animation:动画名称 n秒 属性 属性 属性 (调用动画)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { color: white; width: 80px; height: 50px; position: relative; background: chartreuse; box-shadow: 0px 0px 3px aqua; animation:myfirst 5s; /*调用动画*/ -webkit-animation:myfirst 5s; /* Safari and Chrome */ } @keyframes myfirst{ /*定义动画*/ 0%{ top: 0; left: 0; transform: rotate(0deg); } 10%{ top: 0; left: 0; background: #00FFFF; transform: rotate(30deg); } 30%{ top: 0; left: 0; background: #00FFFF; transform: rotate(10deg); } 50%{ top: 0; left: 200px; background: #00FFFF; transform: rotate(0deg); } 70%{ background: #00FFFF; } 100%{ left: 0px; transform: rotate(720deg); } } </style> </head> <body> <div id="translate1"> <span><b>CSS3</b></span> <br> 动画 </div> </body> </html> |
结果:效果可以自己看,和这里差不多 http://www.runoob.com/css3/css3-animations.html
***直接加载animation后面的属性***
等待:linear 2s
循环:infinite 重复动画效果
交替:alternate 按原操作,返回