我正在介绍“圣诞快乐”视频,我想使用HTML。 https://cleoni.pl/
#home-bg-video {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background: #000000;
background-size: cover;
}
<video id="home-bg-video" poster="../video/CHoinka_AR_001_cam_002.jpg" autoplay>
<source src="../video/2019_choinka_dzwonki_77.mp4" type="video/mp4">
<source src="../video/2019_choinka_dzwonki_77.webm" type="video/webm">
</video>
答案 0 :(得分:2)
这是您想要的效果吗?
#home-bg-video {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background: #000000;
background-size: cover;
animation: mymove 2s;
-webkit-animation: mymove 2s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
from {
-webkit-transform: translateX(50%) translateY(50%);
transform: translateX(50%) translateY(50%);
}
to {
-webkit-transform: translateX(0%) translateY(0%);
transform: translateX(0%) translateY(0%);
}
}
/* Standard syntax */
@keyframes mymove {
from {
-webkit-transform: translateX(50%) translateY(50%);
transform: translateX(50%) translateY(50%);
}
to {
-webkit-transform: translateX(0%) translateY(0%);
transform: translateX(0%) translateY(0%);
}
}
<video id="home-bg-video" autoplay>
<source src="https://www.w3schools.com/html/mov_bbb.mp4">
</video>