欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css3动画开发笔记_html/css_WEB-ITnose

程序员文章站 2022-05-24 09:25:57
...

动画滑出效果

首先来看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

相关标签: css3动画开发笔记