深圳市金黑网络技术有限公司始终坚持以用户需求为导向,提供安全、稳定、高效的产品和服务!
签到 · 搜索导航 · 服务热线 · 微信/手机:17817817816

深圳网站建设

查看: 924|回复: 0

2d变换过渡效果css3样式特效代码

[复制链接]

UID
13
贡献
74
金币
0
主题
24
在线时间
10 小时
注册时间
2023-6-26
最后登录
2023-7-5
发表于 2023-6-26 19:59:16 | 924 | 0 | 显示全部楼层 |阅读模式
本帖最后由 马不停蹄 于 2023-6-26 20:03 编辑

2d变换效果css样式效果代码

可以设置移动,旋转,大小
语法:transform:值
a)移动
        语法:transform:translate(值1,值2);
        取值:第一个值代表横向移动的像素,第二个值代表纵向移动的像素
  1. <head>
  2. <meta charset="utf-8">
  3. <title>无标题文档</title>
  4. <style>
  5.         .box{
  6.                 width:200px;
  7.                 height:200px;
  8.                 background:#f00;        
  9.         }
  10.         .box:hover{
  11.                 transform:translate(50px,20px);        /* 横线移动和纵向移动 */
  12.                 /*transform:translateY(50px);*/
  13.         }
  14. </style>
  15. </head>

  16. <body>
  17. <div class="box"></div>
  18. </body>
复制代码
多学一招:只设置x轴或者y轴的移动可以使用translateX和translateY,里面只设置一个值即可

b)旋转
        语法:transform:rotate(角度);transform-origin:横向坐标 纵向坐标;
        取值:
                1.角度写法:数字deg。
                2.横向坐标和纵向坐标确定旋转的圆心,可以是像素,也可以是关键字(left,right,top,bottom,center),不设置的话,旋转的圆心默认是中心点
  1. <head>
  2. <meta charset="utf-8">
  3. <title>无标题文档</title>
  4. <style>
  5.         .box{
  6.                 width:200px;
  7.                 height:200px;
  8.                 background:#f00;
  9.                 margin:200px;
  10.                 border-left:10px solid #0f0;
  11.                 border-bottom:10px solid #00f;
  12.         }
  13.         .box:hover{
  14.                 transform:rotate(45deg);/* 设置旋转和角度 */
  15.                 transform-origin:left top;/* 设置旋转的圆心 */
  16.         }
  17. </style>
  18. </head>

  19. <body>
  20. <div class="box"></div>
  21. </body>
复制代码
c)缩放
        语法:transform:scale(值)
        取值:倍数,可以是整数,也可以是小数
  1. <head>
  2. <meta charset="utf-8">
  3. <title>无标题文档</title>
  4. <style>
  5.         .box{
  6.                 width:200px;
  7.                 height:200px;
  8.                 background:#f00;
  9.         }
  10.         .box:hover{
  11.                 transform:scale(2);        
  12.         }
  13. </style>
  14. </head>

  15. <body>
  16. <div class="box">
  17.         
  18. </div>
  19. <p>asdf</p>
  20. </body>
复制代码
多学一招:如果有两个值,第一个代表宽度比例,第二个代表高度比例
5.过渡效果
是一个动画的效果
语法:transition:动画css属性 过渡时间秒数 速度类型 延迟的秒数
取值:第一个值,写css属性名称,就是要发生改变的css属性,第二个值是时间单位s秒,第三个值是发生改变的曲线linear匀速,ease先慢后快再慢,第四个值可以定义动画在几秒后开始
  1. <head>
  2. <meta charset="utf-8">
  3. <title>无标题文档</title>
  4. <style>
  5.         img{
  6.                 display:block;
  7.                 margin:50px auto;
  8.                 border:1px solid #000;
  9.                 /* 加过渡效果,必须是在元素原本的样式上面加,不在伪类上加 */
  10.                 transition:transform 2s linear;
  11.         }
  12.         img:hover{
  13.                 transform:scale(1.5);        
  14.         }
  15. </style>
  16. </head>

  17. <body>
  18. <img src="img/meinv.jpg" />
  19. </body>
复制代码
楼主热帖

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

快速回复 返回顶部 返回列表