three实现三维图片飘动漂浮动画效果代码

代码语言:html

所属分类:三维

代码描述:three实现三维 图片 飘动漂浮动画效果代码

代码标签: three 三维 图片 飘动 漂浮 动画

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

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

<style>
    @charset "UTF-8";
* {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.p-text {
  color: #fffffd;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.5;
  text-align: center;
  text-transform: lowercase;
}

.p-flex-hzt-center {
  display: flex;
  justify-content: center;
}

body {
  height: 100vh;
  background-color: hotpink;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.bg {
  width: 100%;
  height: 100%;
  /*Free Sprinkles SVG background provided by SVGeez.com - CC 4.0 License - © 2019 Megan Young */
  fill: #7c4de1;
  background-size: 131px 131px;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500' fill-opacity='1' %3E%3Cstyle%3E .st0{fill:rgb(124, 77, 225)} %3C/style%3E%3Cpath class='st0' d='M55.5 475h-19c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5h19c1.9 0 3.5 1.6 3.5 3.5s-1.6 3.5-3.5 3.5zM144.7 178.9c-.4 0-.8-.1-1.2-.2-1.8-.7-2.7-2.7-2.1-4.5l6.6-17.8c.7-1.8 2.7-2.7 4.5-2.1 1.8.7 2.7 2.7 2.1 4.5l-6.6 17.8c-.6 1.4-1.9 2.3-3.3 2.3zM107.9 130.4c-1 0-2.1-.5-2.7-1.3l-11.8-14.9c-1.2-1.5-.9-3.7.6-4.9 1.5-1.2 3.7-.9 4.9.6l11.8 14.9c1.2 1.5.9 3.7-.6 4.9-.7.5-1.4.7-2.2.7zM103.2 87.6c-1.5 0-2.8-.9-3.3-2.4-.6-1.8.3-3.8 2.2-4.4l6.6-2.3c1.8-.6 3.8.3 4.4 2.2.6 1.8-.3 3.8-2.2 4.4l-6.6 2.3c-.3.2-.7.2-1.1.2zM300.5 46c-.9 0-1.8-.3-2.5-1-1.4-1.4-1.4-3.6 0-5l15-15c1.4-1.4 3.6-1.4 4.9 0 1.4 1.4 1.4 3.6 0 5l-15 15c-.6.7-1.5 1-2.4 1zM193.5 292c-1.9 0-3.5-1.6-3.5-3.5v-9c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5v9c0 1.9-1.6 3.5-3.5 3.5zM163.5 40c-.9 0-1.8-.3-2.5-1-1.4-1.4-1.4-3.6 0-5l17.5-17.5c1.4-1.4 3.6-1.4 5 0s1.4 3.6 0 5L166 39c-.7.7-1.6 1-2.5 1zM252.5 167h-12c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5h12c1.9 0 3.5 1.6 3.5 3.5s-1.6 3.5-3.5 3.5zM199 142.5c-.9 0-1.8-.3-2.5-1L186 131c-1.4-1.4-1.4-3.6 0-5s3.6-1.4 5 0l10.5 10.5c1.4 1.4 1.4 3.6 0 5-.7.7-1.6 1-2.5 1zM108.5 162h-31c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5h31c1.9 0 3.5 1.6 3.5 3.5s-1.6 3.5-3.5 3.5zM134.5 231c-1.9 0-3.5-1.6-3.5-3.5v-16c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5v16c0 1.9-1.6 3.5-3.5 3.5zM136.5 86c-1.9 0-3.5-1.6-3.5-3.5v-23c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5v23c0 1.9-1.6 3.5-3.5 3.5zM63.5 64h-21c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5h21c1.9 0 3.5 1.6 3.5 3.5S65.4 64 63.5 64zM70.5 124c-.9 0-1.8-.3-2.5-1l-9-9c-1.4-1.4-1.4-3.6 0-5s3.6-1.4 5 0l9 9c1.4 1.4 1.4 3.6 0 5-.7.7-1.6 1-2.5 1zM97.5 200c-1.9 0-3.5-1.6-3.5-3.5v-8c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5v8c0 1.9-1.6 3.5-3.5 3.5zM256.5 129h-15c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5h15c1.9 0 3.5 1.6 3.5 3.5s-1.6 3.5-3.5 3.5zM172.5 102c-1.9 0-3.5-1.6-3.5-3.5v-9c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5v9c0 1.9-1.6 3.5-3.5 3.5zM275.5 214c-.9 0-1.8-.3-2.5-1l-9-9c-1.4-1.4-1.4-3.6 0-5s3.6-1.4 4.9 0l9 9c1.4 1.4 1.4 3.6 0 5-.6.7-1.5 1-2.4 1zM104.5 262c-1.9 0-3.5-1.6-3.5-3.5v-17c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5v17c0 1.9-1.6 3.5-3.5 3.5zM53.5 278c-1.1 0-2.1-.5-2.8-1.4-1.2-1.5-.8-3.7.7-4.9l12-9c1.5-1.2 3.7-.8 4.9.7 1.2 1.5.8 3.7-.7 4.9l-12 9c-.6.5-1.4.7-2.1.7zM173.5 264c-.6 0-1.1-.1-1.7-.4l-13-7c-1.7-.9-2.3-3-1.4-4.7.9-1.7 3-2.3 4.7-1.4l13 7c1.7.9 2.3 3 1.4 4.7-.6 1.1-1.8 1.8-3 1.8zM203.5 182h-26c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5h26c1.9 0 3.5 1.6 3.5 3.5s-1.6 3.5-3.5 3.5zM84.5 61c-1.9 0-3.5-1.6-3.5-3.5v-22c0-1.9 1.6-3.5 3.5-3.5s3.5 1.6 3.5 3.5v22c0 1.9-1.6 3.5-3.5 3.5zM196.5 82c-.9 0-1.8-.3-2.5-1-1.4-1.4-1.4-3.6 0-5l15-15c1.4-1.4 3.6-1.4 5 0s1.4 3.6 0 5l-15 15c-.7.7-1.6 1-2.5 1zM196.5 236c-.9 0-1.8-.3-2.5-1l-13-13c-1.4-1.4-1.4-3.6 0-5s3.6-1.4 5 0l13 13c1.4 1.4 1.4 3.6 0 5-.7.7-1.6 1-2.5 1zM37.5 151c-1.1 0-2.2-.5-2.9-1.6-1.1-1.6-.6-3.8 1-4.9l9-6c1.6-1.1 3.8-.6 4.9 1 1.1 1.6.6 3.8-.........完整代码请登录后点击上方下载按钮下载查看

网友评论0