当前位置：首页 > news >正文

交互动效设计

news 2025/10/5 5:37:03

分为三个部分：
1.变换 2. 动画 3. 动效案例

1. 变换

【1】场景

【2】坐标系

1.2 2D变换

translateX(50%)与left(50%)区别
前者：自身的50%
后者：盒子的50%

1.2.1 2D变换之平移

【1】语法

【2】案例

1.2.2 2D变换之旋转

【1】语法

【2】代码

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {width: 200px;border-radius: 50%;border: 1px solid #000;margin: 130px;/* 过渡写在img是鼠标离开时也会慢慢恢复原样 *//* transition: all 1s; *//* 也可以改变旋转的中心点 */transform-origin: left;}img:hover {/* 过渡如果写在:hover 里，鼠标离开时会快速恢复原样 */transition: all 1s;transform: rotate(360deg);}</style>
</head><body><img src="../images/cat1.jpg" alt="">
</body>

注意事项：
1.行内元素不可以旋转，要么display:block;要么display:inline block;
即转换为块级元素或者行内块级元素
2.鼠标过渡加在不同位置的区别

1.2.3 2D变换之缩放

【1】语法

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1 {width: 200px;height: 200px;background-color: pink;transition: all 0.5s;}.box2 {width: 200px;height: 200px;background-color: skyblue;}.box1:hover {/* 特点不影响其他盒子的布局 */transform: scale(1.5);}</style>
</head><body><div class="box1"></div><div class="box2"></div>
</body>

1.2.4 2D变换之倾斜

【1】语法

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 200px;height: 55px;text-align: center;line-height: 55px;color: #fff;background-color: pink;/* 倾斜效果 *//* 字体也会倾斜 */transform: skewX(-16deg);}.card {width: 240px;height: 280px;margin: 50px;/* 子绝父相 *//* 这样儿子的定位就会以父盒子为参考点 */position: relative;}.card div {width: 100%;height: 100%;position: absolute;top: 0;left: 0;border-radius: 0px 30px 40px 40px;/* 调整一下倾斜中心为左上角 */transform-origin: top left;/* 添加过渡效果 */transition: all 0.5s;}.card .front {/* 想让这个透明的在前面 */z-index: 1;background-color: rgba(0, 0, 0, 0.4);}/* 鼠标经过card里面的back倾斜变大 */.card:hover .back {transform: skewY(15deg);width: 200px;}/* 鼠标经过card里面的back倾斜变大时，front会上移 */.card:hover .front {transform: translateY(-3px);}.card .back {background-color: purple;/* 添加倾斜效果 */transform: skewY(8deg);}</style>
</head><body><div class="box">英雄联盟</div><div class="card"><div class="front"></div><div class="back"></div></div>
</body>

1.2.5 过渡进阶

注意：持续时间不能省略，其他都有默认值

1.2.6 变换函数的复合写法

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 1000px;height: 100px;border: 1px solid red;}img {width: 100px;transition: all 2s;}/* 经过box时，里面的img的调整 */.box:hover img {/* 让轮胎移动并旋转 *//* 注意执行顺序 ，属性之间空格隔开 */transform: translateX(600px) rotate(360deg);}</style>
</head><body><div class="box"><img src="../images/image.png" alt=""></div>
</body>

1.3 3D变换

1.3.1 3D变化之左手法则以及旋转rotateXYZ

【1】三维坐标系

【2】旋转

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {width: 230px;/* 添加过渡效果 */transition: all 0.5s;}.catx:hover {transform: rotateX(180deg);}.caty:hover {transform: rotateY(180deg);}.catz:hover {transform: rotateZ(180deg);}</style>
</head><body><img src="../images/cat1.jpg" alt="" class="catx"><br><img src="../images/cat7.jpg" alt="" class="caty"><br><img src="../images/cat11.jpeg" alt="" class="catz">
</body>

1.3.2 3D变化之透视perspective以及旋转方向

【1】场景

【2】语法

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {display: block;margin: 0 auto;width: 230px;/* 添加过渡效果 */transition: all 0.5s;/* 给父亲添加透视效果 *//* perspective: 500px; */}/* 给子元素添加透视，但一定写在最前面 */.catx {transform: perspective(500px) rotateX(50deg);}.caty:hover {transform: perspective(400px) rotateY(180deg);}.catz {transform: rotateZ(30deg);}</style>
</head><body><img src="../images/cat1.jpg" alt="" class="catx"><br><img src="../images/cat7.jpg" alt="" class="caty"><br><img src="../images/cat11.jpeg" alt="" class="catz">
</body>