元素的动画
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>Documenttitle><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>Documenttitle><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>Documenttitle><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属性的执行顺序是从右到左依次执行，比如第一个组合就是先触发旋转动作，再触发位移动作，第二个是先触发位移动作，再触发旋转动作，所以最终的效果不同
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！