css3 2D动画的基本用法和介绍
<style>
body{height:400px;border:1px solid #000;}
.box{width:90px;height:30px;border:1px solid;border-radius:8px;background:linear-gradient(to top,red,orange);margin:200px auto;stransform:2s;-webkit-transform-origin:right,bottom;}
.box a{text-decoration:none;text-align:center;display:block;line-height:31px;}
/*2.tanslate:(x轴,y轴) 在原元素的基础上x,y移动*/
/*body .box:hover {-webkit-transform:translate(-50px,60px);} */
/* 3. scale(x,y)增加或缩小元素 高x 宽y sacleX(x) scaleY(y)
body .box:hover{-webkit-transform:scale(-10,-5) scaleX(5) scaleY(5);} */
/* 4.rotate(0deg) 正值顺时针旋转 负值逆时针旋转
body .box:hover{-webkit-transform:rotate(260deg);}
body .box:hover{-webkit-transform:scale(5,3) rotate(30deg);} */
/* 5.-webkit-transform:skew(x,y) 给定角度
body .box:hover{-webkit-transform:skew(30deg,50deg);}*/
/*6.body .box:hover{transform:matrix(0.866,0.5,-0.5,0.866,0,0);}*/
</style>
最新文章
- 数据库阿里连接池 druid配置详解
- ORA-01336: specified dictionary file cannot be opened
- javascript原型方法
- CSS3——3D效果
- 为nginx增加nginx_http_concat模块
- linux下线程调用sleep,进程挂起
- jquery中onclick="fn"中$(this)所代表的对象
- windows路由命令route
- 如何断开eclipse与svn的链接
- 二分图最小路径覆盖--poj2060 Taxi Cab Scheme
- 开始编写寄几的 CSS 基础库
- 32位汇编第一讲x86和8086的区别,以及OllyDbg调试器的使用
- docker容器自动退出的问题
- 【大前端攻城狮之路】JavaScript函数式编程
- nginx普通配置/负载均衡配置/ssl/https配置
- ios和安卓H5交互桥接
- PS 知识整理
- P1601 A+B Problem（高精）
- react-router 从 v3 版本升到 v4 版本，升级小记
- LFS、BLFS、ALFS、HLFS的区别