元素的动画
HTML的动画是通过转换和位移来实现的，接下来我们
一、转换
转换（transform），也称变形。就是改变元素在页面中的位置，大小，角度以及形状。
转换分为2d和3d转换
2d转换指仅在x轴和y轴形成的平面内发生的转换
请添加图片描述
3d转换指在x轴、y轴和z轴组成的3维空间中发生的转换
请添加图片描述
在css中的转换属性是用transform，格式如下
transform: translate/rotate/scale注意上述的属性值都是函数
函数 | 用法 |
|---|---|
translate(x, y) | 位移距离:x参数表示x轴方向的距离，y参数表示y轴方向的距离 |
rotate(deg) | 元素旋转，参数是度数，顺时针正数，逆时针负数 |
scale(x, y) | 元素缩放，x轴方向的缩放系数，y轴方向的缩放系数 |
接下来通过一些例子来看一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body{
height: 100%;
}
body{
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width: 300px;
height: 300px;
background-color: #e176f1;
transition: 1s;
}
.box:hover{
transform: translate(-120px, -120px);
transition: 1s;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
</body>
</html>效果
请添加图片描述
上述例子就是鼠标移入元素时会让元素想左移动120px，向上移动120px
旋转例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body{
height: 100%;
}
body{
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width: 300px;
height: 300px;
background-color: #e176f1;
transition: 2s;
}
.box:hover{
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>效果
请添加图片描述
上述效果实现鼠标移入元素时触发元素的旋转，正数顺时针，负数逆时针
缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body{
height: 100%;
}
body{
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width: 300px;
height: 300px;
background-color: #e176f1;
transition: 1s;
}
.box:hover{
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>效果
请添加图片描述
上图效果实现鼠标移入元素时触发元素的缩放效果
另外transform属性的函数可以混合使用，让我们看一下把transform的属性改为如下
transform: translateX(300px) rotate(200deg);效果
请添加图片描述
然后我们把transform属性的函数进行调换
transform: rotate(200deg) translateX(300px);效果
请添加图片描述
我们会看到属性值的顺序会引起不一样的效果，这里我们总结一下，transform属性的执行顺序是从右到左依次执行，比如第一个组合就是先触发旋转动作，再触发位移动作，第二个是先触发位移动作，再触发旋转动作，所以最终的效果不同
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2023-10-11，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读