CSS3创意动画列表项添加、删除效果

时间: 2013-12-9 分类: CSS 作者: SAI

TAGS:

091427ioyztiihtfhyo7h9
在今天的教程中,我们将创建用于添加和删除列表中的项目, 使用CSS3实现了一些创意的动画和过渡效果。
代码:
 
<div>Item Deleted. Undo?</div>
<div>Item Saved</div>
<div>
  <header>
    <h1>mini reminders list</h1>
  </header>
  <form id=”input-form”>
    <input type=”text” id=”text” placeholder=”Remind me to..”>
    <input type=”submit” value=”Add”>
  </form>
  <ul>
 
  </ul>
  <footer>
    <span></span>
    <button>Delete All</button>
  </footer>
</div>
 
<code>/*newly added items start faded out and translated 400px upwards on the y-axis*/</code>
li.new-item {
  opacity: 0;
  animation: new-item-animation .3s linear forwards;
}
@keyframes new-item-animation {
  from {
    opacity: 0;
    transform: translateY(-400px);
  }
  to {
    opacity: 1;
    transform : translateY(0);
  }
}
Javin

本文作者: SAI

推崇以用户为中心的设计理念,专注于用户体验设计,游走在视觉设计与前端开发之间。我要投稿

除非特殊注明,本文版权归原作者所有,欢迎转载!转载请注明版权以及本文地址,谢谢。
转载保留版权:塞纳» 前端技术 » CSS » CSS3创意动画列表项添加、删除效果
本文地址:http://www.saiody.com/?p=929

返回顶部