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创意动画列表项添加、删除效果】相关文章
2. 用CSS3创建动画价格表
9. 纯css3有序列表
本文来源:https://www.51html5.com/a991.html
上一篇:纯 CSS 绘制各种图形
下一篇:不用图片和JS,照样创建绚丽的动态CSS3菜单
﹝CSS3创意动画列表项添加、删除效果﹞相关内容
- jQuery动态标签插件 标签可新增和删除
- jQuery文件夹管理插件 可删除文件夹
- 苹果火速删除国内在线播放软件快播iPad版
- CSS3动画效果-animate.css
- bearcat 0.4.4 更新,添加对 id 冲突的提醒
- Jquery实现添加3D特效到你的幻灯片
- 使用jQuery快速添加一个页面的悬浮覆盖层
- Jquery实现添加3D特效到你的幻灯片
- 创意无限:纯CSS打造各种形状钻石
- CSDN范凯:云应用开发创意最重要