css实现按钮点击放大过渡动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现按钮点击放大过渡动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .toggle { position: relative; transition: transform 0.3s 0.2s ease; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; margin: 0; outline: 0 none; border: 0 none; box-shadow: none; text-align: center; font-size: 0.4rem; color: #000; cursor: nw-resize; opacity: 1; } @media screen and (max-width: 480px) { .toggle { transform: scale(0.7); } } .toggle:before, .toggle:after { z-index: -1; content: ""; position: absolute; top: -0.5rem; bottom: -0.5rem; left: -0.5rem; right: -0.5rem; display: block; transform-origin: 50% 50%; border-radius: 50%; background: #ffdc00; opacity: 1; } .toggle:before { transition: transform 0.3s ease-in-out, opacity 0.3s ease; } .toggle:after { transition: transform 0.3s ease, opacity 0.3s ease; background: #000; transform: scale(0); } .toggle.toggle--active { transition: transform 0.3s ease, color 0.3s ease; color: #fff; cursor: se-resize; } .toggle.toggle--active:before { transition: transform 0.3s ease, opacity 0.3s ease; transform: scale(100); opacity: 0.95; } .toggle.toggle--active:after { transition: transform 0.3s cubic-bezier(0, 0.51, 0.27, 1.8); transform: scale(1); } .toggle__icon { display: block; flex: 1 1 10px; width: auto; z-index: 1; position: relative; transform-origin: 50% 50%; transform: scale(1.2); } .toggle__icon .dot { -webkit-animation-name: a-dot; animation-name: a-dot; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-direction: normal; animation-direction: normal; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .toggle.toggle--active .toggle__icon .dot { -webkit-animation-name: a-dot-reverse; animation-name: a-dot-reverse; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-direction: normal; animation-direction: normal; -webkit-animation-timing-function: ease; animation-timing-function: ease; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes a-dot { 0% { stroke-dashoffset: -14; stroke-dasharray: 30 50; stroke: #fff; } 100% { stroke-dashoffset: 0; stroke-dasharray: 3 50; stroke: #000; } } @keyframes a-dot { 0% { stroke-dashoffset: -14; stroke-dasharray: 30 50; stroke: #fff; } 100% { stroke-dashoffset: 0; stroke-dasharray: 3 50; stroke: #000; } } @-webkit-keyframes a-dot-reverse { 0% { stroke-dashoffset: 0; stroke-dasharray: 3 50; stroke: #000; } 100% { stroke-dashoffset: -14; stroke-dasharray: 30 50; stroke: #fff; } } @keyframes a-dot-reverse { 0% { stroke-d.........完整代码请登录后点击上方下载按钮下载查看
网友评论0