本节主要涉及以下知识点：
1、transform--2d变换属性，该属性有三个常用的属性值：translate(200px,100px); 移动，rotate(135deg); 旋转，和scale(2,3);缩放。
2、transition为动画属性，将其添加到需要实现动画效果的元素上，可以实现当该元素的CSS属性值发生改变时采用动画过渡。
注意：以上我们讲了五个英文单词，在实际工作中人们常常会搞不清楚这三个属性之间的关系，所以请务必理解以上两句话。
请看以下代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>2D变换效果transform以及CSS原生的动画属性transition</title>
</head>
<style>
.box{
width:800px;
height:500px;
background:#eee;
}
.s1{
width:100px;
height:100px;
background:#00f;
transition:all 5s ease;
}
/* 当鼠标移动到.box元素上时设置.s1的CSS属性 */
.box:hover .s1{
/* 2d变换移动 */
/*transform:translate(200px,100px); */
/* 2d变换旋转 */
/*transform:rotate(135deg);*/
/* 2d放大缩小，一个值的时候代表宽和高都放大的倍数，两个值的时候第一个代表宽的倍数，第二个代表高的倍数 */
/*transform:scale(2,3);*/
height:400px;
width:500px;
}
</style>
<body>
<div class="box">
<div class="s1"></div>
</div>
</body>
</html>
显示效果如下：
以上代码中都做了详细的注解，大家可以把代码复制出去自己测试一下就清楚了。
|
窥视卡
雷达卡
发表于 2023-2-1 19:03:34
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-19 02:30:16
