js+css实现可自定义动画效果的按钮点击变形动画效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现可自定义动画效果的按钮点击变形动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/boxicons.min.css"> <style> @charset "UTF-8"; @import url("https://use.typekit.net/ers2qgl.css"); * { box-sizing: border-box; } html, body { height: 100%; } body { align-items: center; background: #243747; color: white; display: flex; flex-direction: column; font-family: "rift", sans-serif; font-weight: 300; justify-content: center; } .container { border: 1px solid #36536b; display: flex; flex-direction: column; overflow: auto; width: 450px; } .container .menu-container { align-items: center; background-color: #1e2f3d; display: flex; flex-direction: column; height: 130px; justify-content: space-between; padding: 20px 0; } .container .menu-container p { font-size: 24px; } .container .control-container { background-color: #182530; border-top: 1px solid #36536b; padding: 20px 30px 25px 30px; } .container .control-container select { width: 100%; } .container .control-container select option { color: black; } .container .checkbox-wrapper { align-items: center; display: flex; } .container .checkbox-wrapper label { margin-bottom: 0; margin-left: 10px; } button { appearance: none; -moz-appearance: none; -webkit-appearance: none; background: transparent; border: none; cursor: pointer; height: 50px; outline: none; padding: 0; position: relative; transition: transform 150ms ease; width: 50px; } button.active svg#toggle-base { opacity: 0.4; transform: translate(5px, 5px); } button.active .outline line { -webkit-animation: flicker 250ms ease 1 forwards 200ms, secondary-flicker 300ms ease infinite forwards 550ms; animation: flicker 250ms ease 1 forwards 200ms, secondary-flicker 300ms ease infinite forwards 550ms; } button.active #open-cubes rect, button.active #close-cubes rect { fill: #d3fc3d; } button .corner line { stroke: #2a76b5; stroke-width: 4; } button svg { position: absolute; left: 0; top: 0; } button svg #open-cubes rect, button svg #close-cubes rect { fill: #3094e6; transition: fill 100ms ease-in-out; } button svg #close-cubes rect { opacity: 0; } button svg#toggle-base { opacity: 0; transition: all 250ms ease-in-out; } button svg#toggle-base .corner line { stroke: #3da7fc; stroke-width: 4; } button #bars { opacity: 0.2; } label { display: block; font-family: "rift", sans-serif; font-size: 24px; font-weight: 600; margin-bottom: 6px; } p { font-size: 16px; line-height: 24px; margin-bottom: 0; margin-top: 15px; } .range-control { align-items: center; background: linear-gradient(rgba(94, 100, 111, 0.25) 3px, transparent 3px) 8px 4px/16px 16px, linear-gradient(to right, rgba(94, 100, 111, 0.25) 3px, transparent 3px) 8px 4px/16px 16px, rgba(43, 44, 43, 0.4); border-bottom: 2px solid #3094e6; border-top: 2px solid #3094e6; display: flex; height: 45px; justify-content: space-between; padding-left: 8px; position: relative; width: 375px; } .range-control:before, .range-control:after { background-color: rgba(255, 255, 255, 0.7); content: ""; height: 41px; position: absolute; width: 2px; } .range-control:before { left: 0; top: 0; } .range-control:after { right: 0; top: 0; } .range-control .range-slider-container { align-items: center; display: flex; } .range-control .range-slider-container:before, .range-control .range-slider-container:after { background-color: rgba(255, 255, 255, 0.7); content: ""; height: 14px; width: 2px; } .range-control .range-slider-container:before { left: 5px; margin-right: 1px; top: 0; } .range-control .range-slider-container:after { margin-left: 1px; right: 0; top: 0; } .range-control .range-value-container { align-items: center; color: #6fbaf7; display: flex; flex-grow: 1; font-size: 24px; justify-content: center; text-shadow: 0px 0px 15px #3094e6; } .range-control i { font-size: 24px; position: absolute; right: 10px; } select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: transparent; background-image: none; border: none; color: #fff; font-family: "rift", sans-serif; font-size: 24px; padding-right: 20px; position: relative; } input[type=range] { -moz-appearance: none; appearance: none; background: transparent; cursor: pointer; transition: opacity 300ms ease-in-out; -webkit-appearance: none; width: 280px; } input[type=range]:focus { outline: none; } input[type=range]:disabled { opacity: 50%; } input[type=range]::-moz-range-track { background-color: #3094e6; background: linear-gradient(to right, white 3%, #3094e6 3%, #3094e6 97%, white 97%); height: 3px; } input[type=range]::-webkit-slider-runnable-track { background-color: #b0e5fb; background: linear-gradient(to right, white 3%, #b0e5fb 3%, #b0e5fb 97%, white 97%); height: 3px; } input[type=range]::-moz-range-thumb { background-color: rgba(255, 255, 255, 0.5); border: 1px solid white; border-radius: 0; height: 12px; -moz-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; width: 5px; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; background-color: rgba(255, 255, 255, 0.5); border: 1px solid white; border-radius: 0; height: 13px; margin-top: -5px; -webkit-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; width: 7px; } input[type=range]:focus::-moz-range-thumb { background-color: rgba(109, 184, 219, 0.5); border: 1px solid #b0e5fb; } input[type=range]:focus::-webkit-slider-thumb { background-color: rgba(109, 184, 219, 0.5); border: 1px solid #b0e5fb; } input[type=checkbox] { align-items: center; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #1f272e; border: 2px solid #c1c3c5; border-radius: 0; display: flex; justify-content: center; margin: 0; width: 23px; height: 23px; } input[type=checkbox]::before { color: #3094e6; content: ""; font-family: boxicons; font-weight: 400; font-size: 26px; line-height: 1; transform: scale(0); transition: 120ms transform ease-in-out; } input[type=checkbox]:checked::before { transform: scale(1); } .flash-in { -webkit-animation: flash-in 1300ms ease 1 forwards 10ms; animation: flash-in 1300ms ease 1 forwards 10ms; } .flash-out { -webkit-animation: flash-out 1300ms ease 1 forwards 10ms; animation: flash-out 1300ms ease 1 forwards 10ms; } .shrink-in { -webkit-animation: shrink-in 1300ms ease 1 forwards 10ms; animation: shrink-in 1300ms ease 1 forwards 10ms; transform-origin: center; } .shrink-out { -webkit-animation: shrink-out 1300ms ease 1 forwards 10ms; animation: shrink-out 1300ms ease 1 forwards 10ms; transform-origin: center; } .grow-in { -webkit-animation: grow-in 1300ms ease 1 forwards 10ms; animation: grow-in 1300ms ease 1 forwards 10ms; transform-origin: center; } .grow-out { -webkit-animation: grow-out 1300ms ease 1 forwards 10ms; animation: grow-out 1300ms ease 1 forwards 10ms; transform-origin: center; } .spin-in { -webkit-animation: spin-in 1300ms ease 1 forwards 10ms; animation: spin-in 1300ms ease 1 forwards 10ms; transform-origin: center; } .spin-out { -webkit-animation: spin-out 1300ms ease 1 forwards 10ms; animation: spin-out 1300ms ease 1 forwards 10ms; transform-origin: center; } .slide-in { -webkit-animation: slide-in 1300ms ease 1 forwards 10ms; animation: slide-in 1300ms ease 1 forwards 10ms; transform-origin: center; } .slide-out { -webkit-animation: slide-out 1300ms ease 1 forwards 10ms; animation: slide-out 1300ms ease 1 forwards 10ms; transform-origin: center; } @-webkit-keyframes flicker { 0% { stroke: #2a76b5; } 15% { stroke: #d3fc3d; } 30% { stroke: #2a76b5; } 45% { stroke: #d3fc3d; } 60% { stroke: #2a76b5; } 70% { stroke: #d3fc3d; } 80% { stroke: #2a76b5; } 85% { stroke: #d3fc3d; } 90% { stroke: #2a76b5; } 95% { stroke: #d3fc3d; } 98% { stroke: #2a76b5; } 100% { stroke: #d3fc3d; } } @keyframes flicker { 0% { stroke: #2a76b5; } 15% { stroke: #d3fc3d; } 30% { stroke: #2a76b5; } 45% { stroke: #d3fc3d; } 60% { stroke: #2a76b5; } 70% { stroke: #d3fc3d; } 80% { stroke: #2a76b5; } 85% { stroke: #d3fc3d; } 90% { stroke: #2a76b5; } 95% { stroke: #d3fc3d; } 98% { stroke: #2a76b5; } 100% { stroke: #d3fc3d; } } @-webkit-keyframes secondary-flicker { 0% { opacity: 0.6; } 15% { opacity: 1; } 30% { opacity: 0.6; } 45% { opacity: 1; } 60% { opacity: 0.6; } 70% { opacity: 1; } 80% { opacity: 0.6; } 85% { opacity: 1; } 90% { opacity: 0.6; } 95% { opacity: 1; } 98% { opacity: 0.6; } 100% { opacity: 1; } } @keyframes secondary-flicker { 0% { opacity: 0.6; } 15% { opacity: 1; } 30% { opacity: 0.6; } 45% { opacity: 1; } 60% { opacity: 0.6; } 70% { opacity: 1; } 80% { opacity: 0.6; } 85% { opacity: 1; } 90% { opacity: 0.6; } 95% { opacity: 1; } 98% { opacity: 0.6; } 100% { opacity: 1; } } @-webkit-keyframes flash-in { 0% { opacity: 0; } 15% { opacity: 1; } 30% { opacity: 0; } 45% { opacity: 1; } 60% { opacity: 0; } 70% { opacity: 1; } 80% { opacity: 0; } 85% { opacity: 1; } 90% { opacity: 0; } 95% { opacity: 1; } 98% { opacity: 0; } 100% { opacity: 1; } } @keyframes flash-in { 0% { opacity: 0; } 15% { opacity: 1; } 30% { opacity: 0; } 45% { opacity: 1; } 60% { opacity: 0; } 70% { opacity: 1; } 80% { opacity: 0; } 85% { opacity: 1; } 90% { opacity: 0; } 95% { opacity: 1; } 98% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes flash-out { 0% { opacity: 1; } 15% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: 0; } 60% { opacity: 1; } 70% { opacity: 0; } 80% { opacity: 1; } 85% { opacity: 0; } 90% { opacity: 1; } 95% { opacity: 0; } 98% { opacity: 1; } 100% { opacity: 0; } } @keyframes flash-out { 0% { opacity: 1; } 15% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: 0; } 60% { opacity: 1; } 70% { opacity: 0; } 80% { opacity: 1; } 85% { opacity: 0; } 90% { opacity: 1; } 95% { opacity: 0; } 98% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes shrink-in { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } @keyframes shrink-in { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } } @-webkit-keyframes shrink-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0); } } @keyframes shrink-out { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0); } } @-webkit-keyframes grow-in { 0% { opacity: 0; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } } @keyframes grow-in { 0% { opacity: 0; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } 100% { opacity: 1; transform: scale(1); } } @-webkit-keyframes grow-out { 0% { opacity: 1; transform: scale(1); } 50% { transform: scale(1.5); } 100% { opacity: 0; transform: scale(1); } } @keyframes grow-out { 0% { opacity: 1; transform: scale(1); } 50% { transform: scale(1.5); } 100% { opacity: 0; transform: scale(1); } } @-webkit-keyframes spin-in { 0% { opacity: 0; transform: rotate(0deg); } 100% { opacity: 1; transform: rotate(720deg); } } @keyframes spin-in { 0% { opacity: 0; transform: rotate(0deg); } 100% { opacity: 1; transform: rotate(720deg); } } @-webkit-keyframes spin-out { 0% { opacity: 1; transform: rotate(720deg); } 100% { opacity: 0; transform: rotate(0deg); } } @keyframes spin-out { 0% { opacity: 1; transform: rotate(720deg); } 100% { opacity: 0; transform: rotate(0deg); } } @-webkit-keyframes slide-in { 0% { opacity: 0; transform: translate(0px, 0px); } 50% { opacity: 1; transform: translate(-50px, -50px); } 100% { opacity: 1; transform: translate(0px, 0px); } } @keyframes slide-in { 0% { opacity: 0; transform: translate(0px, 0px); } 50% { opacity: 1; transform: translate(-50px, -50px); } 100% { opacity: 1; transform: translate(0px, 0px); } } @-webkit-keyframes slide-out { 0% { opacity: 1; transform: translate(0px, 0px); } 50% { opacity: 1; transform: translate(-50px, -50px); } 100% { opacity: 0; transform: translate(0px, 0px); } } @keyframes slide-out { 0% { opacity: 1; transform: translate(0px, 0px); } 50% { opacity: 1; transform: translate(-50px, -50px); } 100% { opacity: 0; transform: translate(0px, 0px); } } </style> </head> <body> <div class="container"> <div class="menu-container"> <button id="menu-toggle"> <svg height="50" width="50" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"> <g id="open-cubes"> <g id="top-cubes"> <rect x="12" y="19" width="2" height="2" /> <rect x="12" y="21" width="2" height="2" /> <rect x="14" y="19" width="2" height="2" /> <rect x="14" y="21" width="2" height="2" /> <rect x="16" y="19" width="2" height="2" /> <rect x="16" y="21" width="2" height="2" /> <rect x="18" y="19" width="2" height="2" /> <rect x="18" y="21" width="2" height="2" /> <rect x="20" y="19" width="2" height="2" /> <rect x="20" y="21" width="2" height="2" /> <rect x="22" y="19" width="2" height="2" /> <rect x="22" y="21" width="2" height="2" /> <rect x="24" y="19" width="2" height="2" /> <rect x="24" y="21" width="2" height="2" /> <rect x="26" y="19" width="2" height="2" /> <rect x="26" y="21" width="2" height="2" /> <rect x="28" y="19" width="2" height="2" /> <rect x="28" y="21" width="2" height="2" /> <rect x="30" y="19" width="2" height="2" /> <rect x="30" y="21" width="2" height="2" /> <rect x="32" y="19" width="2" height="2" /> <rect x="32" y="21" width="2" height="2" /> <rect x="34" y="19" width="2" height="2" /> <rect x="34" y="21" width="2" height="2" /> <rect x="36" y="19" width="2" height=&q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0