css+svg列表选中勾选动画效果代码
代码语言:html
所属分类:表单美化
代码描述:css+svg列表选中勾选动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .todo-list { background: #FFF; font-size: 20px; max-width: 15em; margin: auto; padding: 0.5em 1em; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2); } .todo { display: block; position: relative; padding: 1em 1em 1em 16%; margin: 0 auto; cursor: pointer; border-bottom: solid 1px #ddd; } .todo:last-child { border-bottom: none; } .todo__state { position: absolute; top: 0; left: 0; opacity: 0; } .todo__text { color: #135156; -webkit-transition: all 0.4s linear 0.4s; transition: all 0.4s linear 0.4s; } .todo__icon { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: auto; margin: auto; fill: none; stroke: #27FDC7; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .todo__line, .todo__box, .todo__check { -webkit-transition: stroke-dashoffset 0.8s cubic-bezier(0.9, 0, 0.5, 1); transition: stroke-dashoffset 0.8s cubic-bezier(0.9, 0, 0.5, 1); } .todo__circle { stroke: #27FDC7; stroke-dasharray: 1 6; stroke-width: 0; -webkit-transform-origin: 13.5px 12.5px; transform-origin: 13.5px 12.5px; -webkit-transform: scale(0.4) rotate(0deg); transform: scale(0.4) rotate(0deg); -webkit-animation: none 0.8s linear; animation: none 0.8s linear; } @-webkit-keyframes explode { 30% { stroke-width: 3; stroke-opacity: 1; -webkit-transform: scale(0.8) rotate(40deg); transform: scale(0.8) rotate(40deg); } 100% { stroke-width: 0; stroke-opacity: 0; -webkit-transform: scale(1.1) rotate(60deg); transform: scale(1.1) rotate(60deg); } } @keyframes explode { 30% { stroke-width: 3; stroke-opacity: 1; -webkit-transform: scale(0.8) rotate(40deg); transform: scale(0.8) rotate(40deg); } 100% { stroke-width: 0; stroke-opacity: 0; -webkit-transform: scale(1.1) rotate(60deg); transform: scale(1.1) rotate(60deg); } } .todo__box { stroke-dasharray: 56.1053, 56.1053; stroke-dashoffset: 0; -webkit-transition-delay: 0.16s; transition-delay: 0.16s; } .todo__check { stroke: #27FDC7; stroke-dasharray: 9.8995, 9.8995; stroke-dashoffset: 9.8995; -webkit-transition-duration: 0.32s; transition-duration: 0.32s; } .todo__line { stroke-dasharray: 168, 1684; stroke-dashoffset: 168; } .todo__circle { -webkit-animation-delay: 0.56s; animation-delay: 0.56s; -webkit-animation-duration: 0.56s; animation-duration: 0.56s; } .todo__state:checked ~ .todo__text { -webkit-transition-delay: 0s; transition-delay: 0s; color: #5EBEC1; opacity: 0.6; } .todo__state:checked ~ .todo__icon .todo__box { stroke-dashoffset: 56.1053; -webkit-transition-delay: 0s; transition-delay: 0s; } .todo__state:checked ~ .todo__icon .todo__line { stroke-dashoffset: -8; } .todo__state:checked ~ .todo__icon .todo__check { stroke-dashoffset: 0; -webkit-transition-delay: 0.48s; transition-delay: 0.48s; } .todo__state:checked ~ .todo__icon .todo__circle { -webkit-animation-name: explode; animation-name: explode; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0