js+css实现提交按钮点击loading加载动画效果代码
代码语言:html
所属分类:加载滚动
代码描述:js+css实现提交按钮点击loading加载动画效果代码
代码标签: js css 提交 按钮 点击 loading 加载 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap"); :root { --main-bg-color: #f5f6fc; } * { box-sizing: border-box; } body { margin: 0; padding: 0; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: var(--main-bg-color); background-size: cover; } button.expand { --button-height: 48px; overflow: hidden; outline: none; background-color: #1f2024; border-radius: 10px; padding: 12px 25px; font-size: 1.1em; border: none; color: white; font-family: "Nunito", sans-serif; cursor: pointer; position: relative; transition: padding 0.3s; } .expand-icon { --icon-size: 10px; height: 100%; position: absolute; top: 0; right: 0; height: var(--button-height); width: var(--button-height); border-left: 1px solid #eee; display: flex; justify-content: center; align-items: center; transform: translateX(calc(var(--button-height) + 1px)); transition: transform 0.3s; } .expand-icon > svg { height: var(--icon-size); width: var(--icon-size); transform: scale(1.5); transition: transform 0.3s; } .expand-icon > svg.second { display: none; transform: scale(0) translateY(50px); transition: transform 0.3s; } button.expand:hover, button.expand.loading { padding-right: calc(25px + var(--button-height)); } button.expand:hover > .expand-icon, button.expand.loading > .expand-icon { transform: translateX(0); transition: transform 0.3s 0.05s; } button.expand.loading > .expand-icon > svg { transform: scale(0); } @keyframes rotate { 0% { transform: scale(0.3) rotateZ(0deg); } 100% { transform: scale(0.3) rotateZ(360deg); } } .loader { --loader-size: 52px; height: var(--loader-size); width: var(--loader-size); border: 4px solid white; border-left-color: transparent; border-right-color: transparent; background-color: transparent; border-radius: 50%; animation: rotate 1.5s linear infinite; position: absolute; right: 0; opacity: 0; pointer-events: none; transitio.........完整代码请登录后点击上方下载按钮下载查看
网友评论0