我爱模板网 > 特效插件 > 视频音乐 >  html5+jQuery 3D视频播放效果正文

html5+jQuery 3D视频播放效果

特效介绍
html5+jQuery 3D视频播放效果

    html5+jQuery 3D视频播放效果。本特效特殊之处在于视频犹如嵌在两张卡片上,并且是放在桌面上,鼠标移到桌面上,镜头会垂直于桌面。点击卡片,就会播放视频。鼠标移开桌面,卡片又会斜放置于桌面,视频会一直播放,就像电视机放倒一样。不得不说,创意不错,html5真的很强大。
使用方法
1、在head引入下面的代码:
<style>
* { -moz-boz-sizing: border-box; font-family: Avenir, sans-serif; }
body { margin: 0; }
figure#desk {
  transform: rotateX(60deg);
  position: relative;
  width: 200%;
  height: 900px;
  background: url(woodgrain.jpg);
  background-size: cover;
  margin-left: -200px;
  margin-top: -150px;
  transition: 1.2s 2s;
}
div#scatter {
  perspective: 700px;
  width: 100%;
  height: 500px;
  overflow: hidden;
  background: linear-gradient(#6c6769  0%, #0a0a0a 100%);
}
figure#desk a  {
  position: absolute;
  top: 150px;
  border: 20px solid #ffe;
  box-shadow: 0px 0px 6px 6px rgba(0,0,0,0.3);
  width: 20%;
  font-size: 0;
  background: #000;
}
figure#desk a video { width: 100%; font-size: 0; transition: .6s; }
figure a#estee  {
  transform: translateX(200%) rotateZ(60deg);
  transition: 2s;
}
figure:hover a#estee  { transform: translateX(30%) rotateZ(700deg);
}
figure a#indre {
  top: 300px;
  transform: translateX(220%) rotateZ(48deg);
  transition: 2s .4s;
}
figure#desk:hover a#indre {
  transform: translateX(100%) rotateZ(360deg);
}
figure#desk:hover {
  transform: rotateX(10deg);
}
figure#desk a:hover video { opacity: 0.5; }
figure#desk a:before {
  content: "play";
  font-size: 30px;
  position: absolute;
  top: 45%; left: 45%;
  color: #fff;
  opacity: 0;
  transition: .3s;
}
figure#desk a:hover:before { opacity: 1; }
figure#desk a.playing:hover:before {
  content: none;
  opacity: 0;
}
figure#desk a.playing video { opacity: 1; }
</style>
<script src="js/prefixfree.min.js"></script>
2、在body引入下面的代码:
<figure id="desk">
<a href="#" id="estee">
<!--视频缩略图-->
  <video poster="http://demosthenes.info/assets/images/estee.jpg">
<!--视频地址-->
    <source src="http://demosthenes.info/assets/videos/estee.mp4" type="video/mpeg">
    <source src="http://demosthenes.info/assets/videos/estee.webm" type="video/webm">
</video>
</a>
<a href="#" id="indre">
<!--视频缩略图-->
<video poster="http://demosthenes.info/assets/images/indre.jpg">
<!--视频地址-->
    <source src="http://demosthenes.info/assets/videos/indre.mp4" type="video/mpeg">
    <source src="http://demosthenes.info/assets/videos/indre.webm" type="video/webm">
</video>
</a>
</figure>
<script src='http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js'></script>
<script src="js/index.js"></script>


部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:基于jQuery的jPlayer视频和音乐播放器 下一篇:DewPlayer,网页音乐播放器flash插件
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢