360度全景海平面效果

代码语言:html

所属分类:三维

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

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

<title> Ocean Surface</title>

<style>
  html, body {
  width:100%;
  height:100%;
  overflow:hidden;
  background:linear-gradient(to top, rgb(255,255,255) 55%, rgb(110,215,255) 80%, rgb(75,100,255) 130%);
  min-height:440px;
}

* {
  position:absolute;
  user-select: none;
}
</style>

</head>
<body translate="no">
<div id="container">
<div id="water"></div>
<div class="bird bird1"></div>
<div class="bird bird2"></div>
<div class="bird bird3"></div>
</div>
<div id="compass">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100px" height="100px">
<circle opacity="0.5" fill="#fff" cx="25" cy="25" r="25" />
<path class="cView" fill="#fff" d="M50,25c-14.33,0-25,0-25,0s0-7,0-25C38.81,0,50,11.19,50,25z" />
<circle fill="#fff" cx="25" cy="25" r="4.67" />
</svg>
</div>
<script type.........完整代码请登录后点击上方下载按钮下载查看

网友评论0