前端开发---css实现移动和放大效果

1.掌握transform属性和transition属性：

transform决定移动的方向，transition决定移动的效果。

transform属性

基本用法：

transform: translate(x,y);

参数详解：

x 表示左右移动，正数表示向右移动，负数表示向左移动；

y 表示上下移动，正数表示向下移动，负数表示向上移动。

transition属性 

基本用法：

transition: all 1s linear;

参数详解：

all指所有属性，包括width，height；

1s指过渡效果花费的时间；

linear指过渡效果的时间曲线，这里是平滑过渡。默认是 "ease"，先慢再快最后慢。

2.平滑的效果

<div class="move">
    <p>向上移动</p>
</div>

平滑的往上移动200px：

.move:hover{
   border: 2px solid #000;
}
.move:hover p{       /*注意是给 p 添加的*/
   transform : translate(0, -200px);
}

3.放大的效果

<div class="scale">
     <img src="你的图片地址" alt="pictrue"/>
</div>

基于中心放大1.2倍:

.scale:hover img{       
 /*注意给 img 添加属性*/ 
  transform: scale(1.2,1.2);
  transform-origin: center center;
}
.scale{
  overflow: hidden;   /*内容溢出时隐藏*/
}

参数介绍：

scale表示放大或缩小；

()里大于1 表示放大，小于1 表示缩小；

第一个数表示x轴的缩放，第二个数表示y轴的缩放，如果两个数一样，可以用一个数代替。

如何平滑的过渡呢？这里用到了transition属性。

添加如下代码：

.scale img{
   transition: all 0.3s linear;
}

 4.扩展

转变元素位置的属性：

transform-origin: center center; 

表示基于中心进行缩放或移动。

参数详解：

第一个参数可以为：left， center，right，定义视图被置于 X 轴的何处；

第二个参数可以为：top，center， bottom， 定义视图被置于 Y 轴的何处。