我正在尝试创建一个视频画廊,就像这个网站:
我的网页是:
但我不能给我的海报视频一个效果,例如当鼠标悬停时缩放海报或模糊它。
这是我的示例视频帖子:
<table>
<td>
<video controls="controls" width="540" height="306" preload="none" poster="http://mohsend.com/images/poster/adib.jpg">
<source src="example.mp4" type="video/mp4" />
</video>
<h6 class="highlightColor">ADIB TAOOSI</h6><h6>''Xoshawistm''<br>director: Mohsen Dadsetan<br>COMING SOON...</h6>
</td>
<td>
<video controls="controls" width="540" height="306" preload="none" poster="http://mohsend.com/images/poster/sohafarhad.jpg">
<source src="example.mp4" type="video/mp4" />
</video>
<h6 class="highlightColor">SOHA & SARO FT FARHAD MANSORI</h6><h6>''Era Kurdistana''<br>director: Mohsen Dadsetan<br>2015</h6>
</td>
</table>
发布于 2015-05-18 02:17:27
您无法对视频应用特效。在您的参考网站中,他们已经将该效果应用于其参考图像。这是来自该网站的示例。
<img width="480"
height="295"
src="http://pmc.tv/wp-content/uploads/2015/04/Saed-Deylami-Sakhte.mp41-480x295.jpg"
class="attachment-folio-thumb2 wp-post-image" alt="Saed Deylami - Sakhte.mp4">
发布于 2015-05-18 03:31:04
这与海报图像没有太多关系。他们使用的是一个应用CSS规则的图像,使用悬停时的过渡。
可以将图像包装在div中,并将overflow设置为隐藏。主图像(如果您愿意,也可以是视频元素)应用了变换。悬停时,将使用过渡参数应用不同的变换,以便在它们之间设置动画。
示例
.wrapper {
width:480px;
height:295px;
overflow:hidden
}
.demo {
transform:rotate(0deg) scale(1);
transition: 0.5s transform;
}
.demo:hover {
transform:rotate(10deg) scale(1.3);
transition: 0.5s transform;
}
<div class="wrapper">
<img class="demo" width="480" height="295" src="http://i.stack.imgur.com/Xu6TL.jpg">
</div>
发布于 2018-07-02 04:09:38
您可以使用以下样式模糊视频海报:
.blur {
-webkit-filter: blur(125px);
-moz-filter: blur(125px);
-o-filter: blur(125px);
-ms-filter: blur(125px);
filter: blur(125px);
}
visible here就是一个例子。
https://stackoverflow.com/questions/30288141
复制相似问题