css动画效果
3个重要的属性
1.变形（transform）
2.转换（transition）
3.动画（animation）
变形（transform）
1.旋转（rotate）
2.扭曲（skew）
3.缩放（scale）
4.移动（translate）
5.矩阵变形*（matrix）
语法
transform ： none | <transform-function>[<transform-fuction>]*
transform属性可以指定为关键字值none 或一个或多个<transform-function>值。
none:表示不变换；
<transform-function>表示一个或多个变换函数，以空格分开*；
角度单位
度：deg
梯度：grad
圈：turn
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="lianxi1.css"> </head> <body> <div id="fangkuai"> <div class="yanse1"> <div class="yanse2"> </div> </div> </div> <br> <br> <br> <br> <div id="fangkuai1"> <div class="yanse3"> <div class="yanse4"> </div> </div> </div> <br> <br> <br> <br> <div id="fangkuai2"> <div class="yanse5"> <div class="yanse6"> </div> </div> </div> <br> <br> <br> <br> <div id="fangkuai3"> <div class="yanse7"> <div class="yanse8"> </div> </div> </div> <br> <br> <br> <br> <br> <br> <div id="kuai1"> <div class="kuai2"></div> <div class="kuai3"></div> <div class="kuai4"></div> </div> </body> </html>#fangkuai{ width: 150px; height: 150px; margin:0 auto; } .yanse1{ width: 150px; height: 150px; border: 1px solid; } .yanse2{ width: 150px; height: 150px; background-color: chartreuse; transform:translate(80px,0px); } #fangkuai1{ width: 150px; height: 150px; margin:0 auto; } .yanse3{ width: 150px; height: 150px; border: 1px solid; } .yanse4{ width: 150px; height: 150px; background-color: chartreuse; transform:scale(0.5,0.4); } #fangkuai2{ width: 150px; height: 150px; margin:0 auto; } .yanse5{ width: 150px; height: 150px; border: 1px solid; } .yanse6{ width: 150px; height: 150px; background-color: chartreuse; transform:skew(1deg,5deg); } #fangkuai3{ width: 150px; height: 150px; margin:0 auto; } .yanse7{ width: 150px; height: 150px; border: 1px solid; } .yanse8{ width: 150px; height: 150px; background-color: chartreuse; transform:rotate(40deg); } #kuai1{ width: 150px; height: 150px; margin:0 auto; } .kuai2{ width: 150px; height: 150px; background-color:yellow; transform:rotate(40deg) translate(59px,95px); } .kuai3{ width: 150px; height: 150px; background-color: chartreuse; transform:rotate(50deg) translate(-8px,-15px); } .kuai4{ width: 150px; height: 150px; background-color: blue; transform:rotate(60deg) translate(-107px,-90px); }
转载于:https://www.cnblogs.com/zhangzongke/p/10952472.html
相关资源：各显卡算力对照表！