本帖最后由 马不停蹄 于 2023-6-26 20:03 编辑
2d变换效果css样式效果代码
可以设置移动，旋转，大小 语法：transform:值 a)移动 语法：transform:translate(值1,值2); 取值：第一个值代表横向移动的像素，第二个值代表纵向移动的像素 - <head>
- <meta charset="utf-8">
- <title>无标题文档</title>
- <style>
- .box{
- width:200px;
- height:200px;
- background:#f00;
- }
- .box:hover{
- transform:translate(50px,20px); /* 横线移动和纵向移动 */
- /*transform:translateY(50px);*/
- }
- </style>
- </head>
- <body>
- <div class="box"></div>
- </body>
b)旋转 语法：transform:rotate(角度);transform-origin:横向坐标 纵向坐标; 取值： 1.角度写法：数字deg。 2.横向坐标和纵向坐标确定旋转的圆心，可以是像素，也可以是关键字(left,right,top,bottom,center)，不设置的话，旋转的圆心默认是中心点 - <head>
- <meta charset="utf-8">
- <title>无标题文档</title>
- <style>
- .box{
- width:200px;
- height:200px;
- background:#f00;
- margin:200px;
- border-left:10px solid #0f0;
- border-bottom:10px solid #00f;
- }
- .box:hover{
- transform:rotate(45deg);/* 设置旋转和角度 */
- transform-origin:left top;/* 设置旋转的圆心 */
- }
- </style>
- </head>
- <body>
- <div class="box"></div>
- </body>
语法：transform:scale(值) 取值：倍数，可以是整数，也可以是小数 - <head>
- <meta charset="utf-8">
- <title>无标题文档</title>
- <style>
- .box{
- width:200px;
- height:200px;
- background:#f00;
- }
- .box:hover{
- transform:scale(2);
- }
- </style>
- </head>
- <body>
- <div class="box">
-
- </div>
- <p>asdf</p>
- </body>
多学一招：如果有两个值，第一个代表宽度比例，第二个代表高度比例 5.过渡效果是一个动画的效果 语法：transition:动画css属性 过渡时间秒数 速度类型 延迟的秒数 取值：第一个值，写css属性名称，就是要发生改变的css属性，第二个值是时间单位s秒，第三个值是发生改变的曲线linear匀速，ease先慢后快再慢，第四个值可以定义动画在几秒后开始 - <head>
- <meta charset="utf-8">
- <title>无标题文档</title>
- <style>
- img{
- display:block;
- margin:50px auto;
- border:1px solid #000;
- /* 加过渡效果，必须是在元素原本的样式上面加，不在伪类上加 */
- transition:transform 2s linear;
- }
- img:hover{
- transform:scale(1.5);
- }
- </style>
- </head>
- <body>
- <img src="img/meinv.jpg" />
- </body>
| 
发表于 2023-6-26 19:59:16
