CSS 动画效果

原创 风火前端人 教程 前端学习 381阅读 2018-04-24 16:33:46 举报

总体来说两类:

  1. transition: 从一个样式到另外一个样式的过渡过程

width:过渡需要的时间

linear: 匀速过度 transition: 2s linear; 匀速过渡,而且时长2s

ease: 慢速开始,然后加快,然后慢速结束

ease-in: 慢速开始

ease-out: 慢速结束

ease-in-out: 慢速开始和结束

例子:

.div1{width: 100px; transition: 1s linear;} .div1:hover{width:500px;}

过渡的属性可以是宽高,字体颜色,背景色等

  1. 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

例子:鼠标移入时元素从最下面没有慢慢滑入的效果

[css] view plain copy
.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);
}
[html] view plain copy
<div class="div1">
<p>好好学习,天天向上</p>
</div>

最后,我还是要推荐下我自己创建的前端学习资料分享群213126486邀请码风火
这是全国最大的前端学习交流的地方,2000人聚集,不管你是小白还是大牛,
小编我都挺欢迎,今天的已经资讯上传到群文件,不定期分享干货,
包括我自己整理的一份最新的适合2018年学习的前端教程,欢迎初学和进阶中的小伙伴。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复