gsap+Draggable实现可拖拽改变大小的弹性div代码-html代码-BFW代码库

gsap+Draggable实现可拖拽改变大小的弹性div代码

代码语言：html

所属分类：拖放

代码描述：gsap+Draggable实现可拖拽改变大小的弹性div代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
  
<style>
@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400");

* {
  box-sizing: border-box;
}

body,
html {
  height: 100%;
  margin: 0;
  background-color: #010101;
  color: #d4d4d4;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: "IBM Plex Sans";
  font-weight: 400;
  font-size: 1.2rem;
}

h2 {
  margin: 0;
  line-height: 150%;
  font-weight: normal;
}

p {
  margin: 1.5rem 0 0 0;
  line-height: 150%;
}

#resizable {
  width: 500px;
  height: 500px;
  background-color: #1d1d1d;
  border-radius: 20px;
  position: relative;
  padding: 3rem;
  box-shadow: inset 0 2px 4px rgba(225,225,225, 0.1);
}

#resizable::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  cursor: ew-resize;
  border-radius: 0 20px 20px 0;
}

#resizable p {
  flex: 1;

  overflow: hidden;
  word-wrap: break-word;
  user-select: none;
}

#resizable:hover::after {
  background-color: rgba(0,100,250,0.5);
}
</style>

  
  
</head>

<body translate="no">
  <div id="resizable">
 <h2>Elastic Div</h2> <p>Inspired by the iPhone volume bar, this elastic div experiments a different way of showing resize limits to users. Just hold and drag the right side to see the effect for yourself. This effect is currently using GSAP, but you could also achieve it with pure JS.<p>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.1.js"></script>
<script ty.........完整代码请登录后点击上方下载按钮下载查看