gsap实现上传按钮动画效果
代码语言:html
所属分类:上传
代码描述:gsap实现上传按钮动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700"); :root { --container-font-size: 28px; --container-background-color: #143982; --btn-upload-background-color: #0d5eff; --btn-upload-color: #ffffff; --btn-upload-width: 225px; --btn-upload-height: 80px; --btn-upload-border-radius: 0.75em; --btn-upload-transition-time: 50ms; --progress-width: 50px; --progress-height: 30px; --progress-top: -40px; --progress-arrow-color: #ffffff; --progress-arrow-background-color: #f53060; --progress-arrow-width: 8px; --progress-arrow-height: 8px; --check-width: 80px; --check-height: 45px; --check-stroke: 15px; } #container { font-family: "Open Sans", sans-serif; font-size: var(--container-font-size); background-color: var(--container-background-color); width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .btn-upload { color: var(--btn-upload-color); fill: var(--btn-upload-color); font-family: inherit; font-size: inherit; font-weight: bold; background-color: var(--btn-upload-background-color); width: var(--btn-upload-width); height: var(--btn-upload-height); padding: 0; border: 0; margin: 0; outline: 0; display: inline-flex; align-items: center; justify-content: center; position: relative; border-radius: var(--btn-upload-border-radius); box-shadow: 0 0.7em 1.2em rgba(25, 25, 25, 0.5); } .btn-upload:not(.btn-upload-uploading) { transition: box-shadow var(--btn-upload-transition-time) ease-out, transform var(--btn-upload-transition-time) ease-out; } .btn-upload:not(.btn-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0