HTML5实现图形挤压变形效果DEMO演示

<!DOCTYPE html>
<!-- saved from url=(0065)http://www.html5tricks.com/demo/html5-image-extrusion/index2.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta charset="UTF-8">

  <title>HTML5实现图形挤压变形效果DEMO演示</title>

  <link rel="stylesheet" href="http://www.html5tricks.com/demo/html5-image-extrusion/css/normalize.css">

    <link rel="stylesheet" href="./HTML5实现图形挤压变形效果DEMO演示_files/style.css" media="screen" type="text/css">

</head>
<style>
</style>
<body>

  <div class="zone">
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>

  <span class="repulse" style="left: 66px; top: 41px;"></span>
</div>

  <script src="./HTML5实现图形挤压变形效果DEMO演示_files/jquery.js"></script>

  <script src="./HTML5实现图形挤压变形效果DEMO演示_files/index.js"></script>



</body></html>
原文地址:https://www.cnblogs.com/yudishow/p/4259986.html