css+jquery实现列表删除带动画效果代码
代码语言:html
所属分类:动画
代码描述:css+jquery实现列表删除带动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <style> .deleteList { margin: 0; padding: 0; list-style: none; background-color: #fff; padding: 20px; border-radius: 5px; } .deleteList li { white-space: nowrap; position: relative; line-height: 24px; text-transform: uppercase; margin: 0 0 12px 0; font-weight: bold; color: #212533; display: flex; } .deleteList li span { display: block; overflow: hidden; transition: transform 0.3s ease 0.1s, opacity 0.5s ease 0.3s; } .deleteList li span:nth-child(1) { position: absolute; left: 0; top: 0; z-index: 1; height: 12px; transform-origin: left bottom; } .deleteList li span:nth-child(2) { position: relative; transform-origin: left center; } .deleteList li span:nth-child(2):before { content: ""; left: 0; top: 0; right: 0; height: 12px; background: #fff; position: absolute; display: block; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0