总体来说两类:
1. transition: 从一个样式到另外一个样式的过渡过程
width:过渡需要的时间
linear: 匀速过度 transition: 1s linear; 匀速过渡,而且时长2s
ease: 慢速开始,然后加快,然后慢速结束
ease-in: 慢速开始
ease-out: 慢速结束
ease-in-out: 慢速开始和结束
例子:
.div1{width: 100px; transition: 1s linear;} .div1:hover{width:500px;}
过渡的属性可以是宽高,字体颜色,背景色等
2. transform:从一个位置到另外一个位置,通常结合transition来使用
①旋转
rotate(30deg) 正值是顺时针
rotateX(30deg)
rotateY(30deg)
② 移动
translate(x,y) 正值是向右,向下
translate3d(x,y,z)
translateX
translateY
translateZ
③ 缩放
scale(x,y) x,y 是倍数,可以是负值
scaleX
scaleY
例子:鼠标移入时元素从最下面没有慢慢滑入的效果
- .div1{
- width:100px;height:200px;background:pink;
- position:relative;
- overflow: hidden;
- transition:1s;
- }
- .div1 p{
- margin:0;
- height:50px;position:absolute;
- bottom:-50px;left:0;right:0;
- background:red;
- transition:1s;
- }
- .div1:hover{
- transform: translateY(10px);
- <span style="color:#FF0000;">box-shadow:0 10px 20px gray;</span> /* 右,下,模糊半径,阴影颜色*/
- }
- <span style="color:#FF0000;">.div1:hover p{</span> /* 鼠标移到div1上对内部的p书写样式*/
- transform: translateY(-50px);
- }
- <div class="div1">
- <p>好好学习,天天向上</p>
- </div>
![](https://i-blog.csdnimg.cn/blog_migrate/95756f3ec1c5061b4a53911686281965.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e292ee4c6f80e1501c4eb3e5c1e5ea3c.png)
![](https://i-blog.csdnimg.cn/blog_migrate/af90c60dc5a4eabb50b9fe589fe3ff79.png)