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;
}

.........完整代码请登录后点击上方下载按钮下载查看

网友评论0