如何使用CSS在网站中添加和显示4D图像

Shadow 发表于 Dev

阴影

全部。我正在我的网站上工作。我做了一个移动图像的横幅，我的问题是，我想为动画横幅显示一个4d或5d图像。OPZET印度是我的网站。我的片段在这里。

 <head>
    	<style type="text/css">
.banner{
  position:absolute;
   background:url(http://previews.123rf.com/images/iimages/iimages1206/iimages120600296/13935384-Illustration-of-empty-yard-and-school-Stock-Vector-road-school-cartoon.jpg);
  -webkit-animation:100s scroll infinite linear;
  -moz-animation:100s scroll infinite linear;
  -o-animation:100s scroll infinite linear;
  -ms-animation:100s scroll infinite linear;
  animation:100s scroll infinite linear;
  top:0;
  left:0;
  width:100%;
 height:100%;
  text-align:center;
}    	

@-webkit-keyframes scroll{
  100%{
    background-position:3000px 0px;
  }
}

@-moz-keyframes scroll{
  100%{
    background-position:3000px 0px;
  }
}

@-o-keyframes scroll{
  100%{
    background-position:3000px 0px;
  }
}

@-ms-keyframes scroll{
  100%{
    background-position:3000px 0px;
  }
}

@keyframes scroll{
  100%{
    background-position:3000px 0px;
  }
}
    	</style>
    </head>
    
    <body>
    	<div class="banner">
          <h1>OPZET India</h1>
            </div>
    </body>

我想使我的网站横幅像此参考站点一样

平行工作室

班萨

给定的网站使用了很多东西，例如WebGL，youtube API和@Connor所说的更多东西。。

我认为您可以使用Three.js来实现相同的功能，因为网站也可以完全使用它，您可以在bundle.js文件中看到它。

还要仔细阅读这些教程，我发现它们与Three.js和Photo Sphere Sphere和Three.js一起非常有用。

有用的Codepen链接：
Css Sphere全景
 Photo Sphere javascript

您可能必须使用一张以上的图片进行全景拍摄。

希望能有所帮助。

var PSV = new PhotoSphereViewer({
    panorama: 'https://cdn.rawgit.com/mistic100/Photo-Sphere-Viewer/3.1.0/example/Bryce-Canyon-National-Park-Mark-Doliner.jpg',
    container: 'photosphere',
    loading_img: 'https://raw.githubusercontent.com/mistic100/Photo-Sphere-Viewer/3.1.0/example/photosphere-logo.gif',
    navbar: 'autorotate zoom download fullscreen',
    caption: 'Bryce Canyon National Park <b>&copy; Mark Doliner</b>',
    default_fov: 65,
    mousewheel: false,
    size: {
      height: 400
    }
  });

#photosphere {
  height: 100%;
  width: 540px;
  margin: 0 auto;
}

<link href="https://cdn.rawgit.com/mistic100/Photo-Sphere-Viewer/3.1.0/dist/photo-sphere-viewer.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/threejs/r70/three.min.js"></script>
<script src="https://cdn.rawgit.com/mistic100/Photo-Sphere-Viewer/3.1.0/dist/photo-sphere-viewer.min.js"></script>
<div id="photosphere"></div>http://stackoverflow.com/posts/38093397/edit#

等待图像载入，因为它的大小为4.29MB，因此需要一些时间。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。