gsap实现鼠标悬浮移动砍一刀切割切开效果代码-html代码-BFW代码库

gsap实现鼠标悬浮移动砍一刀切割切开效果代码

代码语言：html

所属分类：悬停

代码描述：gsap实现鼠标悬浮移动砍一刀切开效果代码，可对dom元素，input输入框、图片进行随意角度切割。

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #f1f1f1;
  background-image: linear-gradient(#bcd2e490 2px, transparent 0);
  background-size: 100% 7vmin;
}

.be-careful {
  position: absolute;
  left: 5vmin;
  top: 0;
  font-size: 3vmin;
  color: #2f2f2f;
  opacity: 0.5;
  height: 7vmin;
  line-height: 7vmin;
  font-family: 'Shadows Into Light', cursive;
}

.select {
  position: absolute;
  bottom: 5vmin;
  display: flex;
  gap: 4vmin;
}

.select > button {
  font-size: 3.5vmin;
  cursor: pointer;
  border: none;
  border-bottom: 0.6vmin solid #2f2f2f;
  font-weight: bold;
  background: none;
  position: relative;
  font-family: 'Shadows Into Light', cursive;
}

.select > button::after {
  content: "";
  position: absolute;
  width: 20%;
  height: 20%;
  border-style: double;
  border: none;
  border-right: 0.6vmin solid #2f2f2f;
  right: 0;
  bottom: 0;
  transform: rotate(45deg) translate(20%, -20%);
}

.container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container > * {
  position: absolute;
  border: 1vmin dashed #2f2f2f;
  padding: 0.7vmin;
  font-weight: bold;
  font-size: 5.5vmin;
  border-radius: 2vmin;
  background-color: #fff;
  font-family: 'Shadows Into Light', cursive;
}

.container > p {
  white-space: pre;
  padding: 1.2vmin 2vmin;
  min-width: 65vmin;
  text-align: center;
}

.container > img {
  width: 600px;
  height: 400px;
  max-width: 50vmin;
  max-height: 33.33vmin;
}

.container > input {
  width: 65vmin;
  height: 15vmin;
}

* {
  cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABMCAYAAAD6BTBNAAAACXBIWXMAAAsSAAALEgHS3X78AAAHnElEQVR4nO2ce0xTVxzHfwWUlvIshUIjgs5HshlBa6biXFF0NmYuJGQPXabE/bF/XHRzwyWTxYXMZLo53Fwys8ygZtncYkbituAUYzffGwOcT0QegmixuwgCl0drl3O95+70eoF7++LeS78J9Jxz20P74fc4r15N2Y4vMx13OvJP2881QmDUbK+ubA5QX7KXZtmCVQODg4MTA/xG99urK4tUyOsxRQQBHtI6q8VWHoR+ZSfNs3NXlAHARvKNpZlNLb6+0bvtjkyiqnpL1Hg8HmCtZR1unL9oHrX5/TcNvnRYddRO7929T0c0qRpiBPrFfsD9uPH86b8Mn370BeVLh/krrLo3Nq6niSZVu3MELoQh+qYI8lVhiNIVwX9FGKI0PQYQwhAlSRAghCGK1rAAIQxRlEYECGGIo2pUgBCGOKJEAYQwxGElGiCEEKLVYsuxWmx5vvQbajFzYakK8ty5CwASiHKevbqyVq4AJVkgVqAs8c+z1XDt0nUqKiqKtMQEXvkkskhf3mco5JMFYvliiQja8Up76z81l40ul0sn9JyYWG3n4MCQ1jXkxtdla4l+AQSJEL/avc954qjdKHTNaEp0rnwpN3LxczlJqWYDNF1vh3fW7ablDtFvgCAB4poXXqdJq5uUlXp76ap5MRgaX0qAGBCAIAJic+MtKN5QwpSRtX1+aLNRHyfowV6SO0SfkoiQRksslUeOO3EZuSqGhwDtKf3Budq6tbNwwRYalcnup8w0wyf7N+qiJkTiRCOrxBIwgDAKxHOnLkTiduSy6PFYxXl605pdcKzigrGvpz8JWRkqf1x8wCujyxliwFyYFN+dp82c2tNwvTEWWPf95tetTCJBVofACfWRmz+b2rJjrVdglKM7B9QCsfiWiOEhLVqe7UaPHe0UYHj6WF3noSPb4d2S17jx4JmqiwYlWGJQAIIARKwlKy0mVPzjt9pO3JZuTnanmZPh+YJndEqDGDSAIAARDZARAKT4RL0WtzfUtxk/KN7LgFIaxKACZMXFp0XLZrtxeXnBfB2Kc7hur/rboESIoQBYgAvzFj/pNQtBSULpEEMBkDuptfO9gzTKpKSUDjEUADcBQB0qoOEHGoaoCWLQAdqrK++jsZpaIYbCAlUNMSQAQcUQQwYQVAoxpADBT4g7Sg8wKzVyghhygOAHxNrqG724LBeIYwIQJEJcXvC0Mz3D2DJj1mSva3KAGJTlLCmyWmyJ6AMBQDZ6Gfqg6APjOTNfEyCK0oPOa5nr54pT9M7Sg9zydiiXwsYcIPgAcftb5e1tTR1DOZbp+uKStcz0cKwgjpkLkxLrzljnf79kvt3akflLxWmvVZxpMyZx2wGhcmdZWCCWWEtE+yZo6Z97Xf5cBhTK1Pw+g22JsgIIEiAi60JWJtTHHMucnprqGm4VPJgQZQcQ/IT4yqsv0wtzF+jOnjlHf//tIS4m.........完整代码请登录后点击上方下载按钮下载查看