TweenMax实现按钮跟随动画特效-html代码-BFW代码库

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html, body {
  height: 100%;
  font-family: 'Lato', sans-serif;
}

.item {
  width: 50%;
  height: 75%;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  position: relative;
}
.item:before {
  font-weight: bold;
  font-size: 35px;
  position: absolute;
  right: 25px;
  top: 15px;
  color: #333;
}

.item-1 {
  background: #F0F0F0;
}
.item-1:before {
  content: '#1';
}
.item-1 .wrap {
  background: #fff;
  border-radius: 20px;
  padding: 30px 37px;
  display: inline-block;
  position: relative;
  box-shadow: 0px 20px 61px -14px rgba(0, 0, 0, 0.2);
}
.item-1 .align {
  display: inline-block;
  margin-right: 35px;
  cursor: pointer;
}
.item-1 .align span {
  background: #E1E1E1;
  display: block;
  margin-bottom: 6px;
  width: 27px;
  height: 4px;
  border-radius: 10px;
}
.item-1 .align span:last-child {
  margin-bottom: 0;
}
.item-1 .align__left span:last-child {
  width: 12px;
  float: left;
}
.item-1 .align__center span:last-child {
  width: 13px;
  position: relative;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.item-1 .align__right span:last-child {
  width: 13px;
  float: right;
}
.item-1 .align__justify {
  margin-right: 0;
}
.item-1 .align-bar {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  opacity: 0;
  margin-right: 0;
  pointer-events: none;
}
.item-1 .align-bar span {
  background: #383838;
}

.item-2 {
  background: #D7DDE9;
}
.item-2:before {
  content: '#2';
}
.item-2 .wrap {
  background: #fff;
  border-radius: 20px;
  padding: 22px 37px;
  display: inline-block;
  position: relative;
  box-shadow: 0px 20px 61px -14px rgba(0, 0, 0, 0.2);
}
.item-2 .align {
  background: #D7DDE9;
  width: 40px;
  height: 40px;
  display: inline-block;
  margin: 0 15px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.item-2 .align img {
  position: relative;
  z-index: 2;
}
.item-2 .align::before {
  content: '';
  display: block;
  position: absolute;
  background: #14D96A;
  z-index: 1;
  transition: all .3s ease-in-out;
}
.item-2 .align-compound:before {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 0;
  height: 0;
}
.item-2 .align-compound.active:before {
  width: 100%;
  height: 100%;
}
.item-2 .align-top:before {
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
}
.item-2 .align-top.active:before {
  width: 100%;
}
.item-2 .align-cross:before {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
}
.item-2 .align-cross.active:before {
  width: 150%;
  height: 150%;
}
.item-2 .align-exception:before {
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
}
.item-2 .align-exception.active:before {
  height: 100%;
}

.item-3 {
  width: 100%;
  background: #E2EAF4;
}
.item-3:before {
  content: '#3';
}
.item-3 .wrap {
  background: #fff;
  border-radius: 20px;
  padding: 27px 35px;
  width: 228px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  box-shadow: 0px 20px 61px -14px rgba(0, 0, 0, 0.2);
}
.item-3 .align {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 30px;
  cursor: pointer;
}
.item-3 .align span {
  background: #BFCCD7;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
.item-3 .align .line {
  width: 2px;
  height: 30px;
}
.item-3 .align .square {
  width: 8px;
  height: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.item-3 .align .square-2 {
  height: 12px;
}
.item-3 .align-left .line-2 {
  left: 14px;
}
.item-3 .align-left .square-2 {
  left: 14px;
}
.item-3 .align-center {
  left: 4px;
}
.item-3 .align-center .line-1 {
  left: 3px;
}
.item-3 .align-center .square-1 {
  left: 0px;
}
.item-3 .align-center .line-2 {
  left: 17px;
}
.item-3 .align-center .square-2 {
  left: 14px;
}
.item-3 .align-right .line-1 {
  left: 13px;
}
.item-3 .align-right .square-1 {
  left: 7px;
}
.item-3 .align-right .line-2 {
  left: 27px;
}
.item-3 .align-right .square-2 {
  left: 21px;
}
.item-3 .align-bar {
  position: absolute;
  top: 27px;
  left: 35px;
  width: 100%;
  opacity: 0;
  margin-right: 0;
  pointer-events: none;
  margin: 0;
}
.item-3 .align-bar span {
  background: #1C8BFD;
}
</style>

</head>
<body translate="no">
<section class="item item-1">
<div class="wrap">
<div class="align align__left align-active">
<span></span>
<span></span>
<span></span>
</div>
<div class="align align__center">
<span></span>
<span></span>
<span></span>
</div>
<div class="align align__right">
<span></span>
<span></span>
<span></span>
</div>
<div class="align align__justify&qu.........完整代码请登录后点击上方下载按钮下载查看

TweenMax实现按钮跟随动画特效

网友评论0

div+css实现漂亮的垂直侧边栏可伸缩菜单效果代码

div+css实现底部横线菜单切换窗口效果代码

div+css实现横向鼠标悬停翻转文字导航菜单效果代码

react+use-web-animations实现横向和竖向图标菜单滑动效果代码

js+css实现滑动图标导航菜单效果代码

matter实现自由落体重力下落的导航菜单效果代码

div+css实现下拉菜单代码

div+css实现左侧悬浮伸缩菜单代码

div+Css实现手风琴二级菜单折叠效果代码

div+css实现二级下拉菜单导航效果代码