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

CSS3教程手机阅读

源码下载在线演示
在今天的教程中，我们将创建用于添加和删除列表中的项目，使用CSS3实现了一些创意的动画和过渡效果。

代码：
<div class="notification undo-button">Item Deleted. Undo?</div><div class="notification save-notification">Item Saved</div><div class="reminder-container"> <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 class="reminders"> </ul> <footer> <span class="count"></span> <button class="clear-all">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); }}

【CSS3创意动画列表项添加、删除效果】相关文章

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

2. 用CSS3创建动画价格表

3. 使用jQuery和CSS3创建一个全屏幕幻灯效果

4. 使用jQuery和CSS3创建一个全屏幕幻灯效果

5. 使用CSS3创建动态3D立方体

6. 使用jQuery和CSS3创建Android导航

7. 使用jQuery和CSS3创建Android导航

8. CSS3制作购物车下拉列表

9. 纯css3有序列表

10. 整理 W3CSchool 常用的CSS属性列表

本文来源：https://www.51html5.com/a991.html