正在保存,请稍后...
  • 8 推荐
  • 8 收藏,322 浏览

动画滑出效果

首先来看DMEO
按钮的尺寸有一个放大的效果。利用transform: scale方法来实现;在放大的过程中,按钮的位置从右向左平移。利用left的值的变化可以实现该效果,为了避免按钮在最初出现时突兀的感觉,利用opacity: 0隐藏按钮,随着按钮的移动,opacity的值逐渐变为1。总的代码为:

@keyframes fade {
	from{ background: rgba(62, 191, 36, 1); transform: scale(0.5); left: 146px;}
	50%{ background: rgba(62, 191, 36, 1);}
	to{ background: rgba(62, 191, 36, 1); transform: scale(1); left: 0;}
	}

接着是光芒效果。光芒的宽度从0变到178,透明度从0变成1。
光芒帧动画:

@keyframes shadow {
	from{ width: 0; opacity: 0;}
	to{ width: 178px; opacity: 1;}
	}

最后是调整动画的持续时间和延迟时间,保持协调:

.ani1 .shadow{
	-webkit-animation-name:shadow;/*动画属性名,也就是我们前面keyframes定义的动画名*/
	-webkit-animation-duration: .8s;/*动画持续时间*/
	-webkit-animation-timing-function: linear;迟时间*/
	-webkit-animation-iteration-count: 1;/*定义循环资料,infinite为无限次*/
	-webkit-animation-fill-mode: forwards;
	}
	.ani1 .icons{
	-webkit-animation-name: fade;/*动画属性名,也就是我们前面keyframes定义的动画名*/
	-webkit-animation-duration: 0.75s;/*动画持续时间*/
	-webkit-animation-timing-function: linear; /*动画频率,和transition-timing-function是一样的*/
	-webkit-animation-delay: .2s;/*动画延迟时间*/
	-webkit-animation-iteration-count: 1;/*定义循环资料,infinite为无限次*/
	-webkit-animation-fill-mode: forwards;
	}

另外贴上两个类似效果的实现:DMEO1,DEMO2

文章批注

你可能感兴趣的文章

关于作者

whg

注册于2015-09-29

1篇文章