jquery+svg实现向左向右剪头点击动画效果代码
代码语言:html
所属分类:其他
代码描述:jquery+svg实现向左向右剪头点击动画效果代码
代码标签: jquery svg 向左 向右 剪头 点击 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .arrow { --active: #fff; --border: rgba(255, 255, 255, .12); display: block; position: relative; width: 44px; height: 44px; } .arrow.left { transform: scaleX(-1); } .arrow i { display: block; position: absolute; margin: -10px 0 0 -10px; width: 20px; height: 20px; left: 50%; top: 50%; } .arrow i:before, .arrow i:after { content: ""; width: 10px; height: 2px; border-radius: 1px; position: absolute; left: 50%; top: 50%; background: var(--active); margin: -1px 0 0 -5px; display: block; transform-origin: 9px 50%; } .arrow i:before { transform: rotate(-40deg); } .arrow i:after { transform: rotate(40deg); } .arrow:before, .arrow:after { content: ""; display: block; position: absolute; left: 1px; right: 1px; top: 1px; bottom: 1px; border-radius: 50%; border: 2px solid var(--border); } .arrow svg { width: 44px; height: 44px; display: block; position: relative; z-index: 1; color: var(--active); stroke-width: 2px; stroke-dashoffset: 126; stroke-dasharray: 126 126 0; transform: rotate(0deg); } .arrow.animate svg { -webkit-animation: stroke 1s ease forwards 0.3s; animation: stroke 1s ease forwards 0.3s; } .arrow.animate i { -webkit-animation: arrow 1.6s ease forwards; animation: arrow 1.6s ease forwards; } .arrow.animate i:before { -webkit-animation: arrowUp 1.6s ease forwards; animation: arrowUp 1.6s ease forwards; } .arrow.animate i:after { -webkit-animation: arrowDown 1.6s ease forwards; animation: arrowDown 1.6s ease forwards; } @-webkit-keyframes stroke { 52% { transform: rotate(-180deg); stroke-dashoffset: 0; } 52.1% { transform: rotate(-360deg); stroke-dashoffset: 0; } 100% { transform: rotate(-180deg); stroke-dashoffset: 126; } } @keyframes stroke { 52% { transform: rotate(-180deg); stroke-dashoffset: 0; } 52.1% { transform: rotate(-360deg); stroke-dashoffset: 0; } 100% { transform: rotate(-180deg); stroke-dashoffset: 126; } } @-webkit-keyframes arrow { 0%, 100% { transform: translateX(0); opacity: 1; } 23% { transform: translateX(17px); opacity: 1; } 24%, 80% { transform: translateX(-22px); opacity: 0; } 81% { opacity: 1; transform: translateX(-22px); } } @keyframes arrow { 0%, 100% { transform: translateX(0); opacity: 1; } 23% { transform: translateX(17px); opaci.........完整代码请登录后点击上方下载按钮下载查看
网友评论0