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; } .deleteList li:last-child { margin-bottom: 0; } .deleteList li .line { border-radius: 2px; background: #F26175; height: 2px; margin: -1px 0 0 0; top: 50%; right: 6px; position: absolute; z-index: 1; } .deleteList li .delete { position: relative; width: 20px; height: 20px; margin: 2px 0 0 8px; border-radius: 50%; cursor: pointer; opacity: 0.5; filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); filter: gray; -webkit-filter: grayscale(100%); transition: all 0.3s ease; } .deleteList li .delete svg { display: block; width: 20px; fill: none; height: 20px; stroke: #F26175; stroke-width: 2; transition: all 0.3s ease; } .deleteList li .delete svg circle { stroke-dasharray: 64; transition: all 0.3s ease; } .deleteList li .delete:before, .deleteList li .delete:after { content: ""; display: block; position: absolute; border-radius: 2px; background: #F26175; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(135deg); transition: all 0.3s ease; } .deleteList li .delete:before { width: 10px; height: 2px; } .deleteList li .delete:after { height: 10px; width: 2px; } .deleteList li .delete.active svg circle { stroke-dashoffset: 64; } .deleteList li .delete.active:before, .deleteList li .delete.active:after { transform: translate(-50%, -50%) rotate(0deg); } .deleteList li .delete.active:after { opacity: 0; } .deleteList li .delete:hover, .deleteList li .delete.hover { filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0