使用 HTML CSS JavaScript 设计视频幻灯片动画效果

如今，视频幻灯片动画非常流行。在本文中，我们将了解如何在任何网页上使用 HTML、CSS 和 JavaScript 制作视频幻灯片动画。以下是有关如何执行此操作的两个步骤。通过参考这篇文章，它将帮助初学者使用 HTML、CSS 和 JS 构建一些很棒的视频幻灯片动画。

什么是 CSS 动画？
CSS 动画是一种改变网页中各种元素的外观和行为的技术。它用于通过改变元素的动作或显示来控制元素。它有两个部分，一个包含描述元素动画的 CSS 属性，另一个包含某些关键帧，这些关键帧指示元素的动画属性以及必须发生的特定时间间隔。

方法：

• 在 HTML 文件的主体内创建一个容器类。
• 在视频标签内使用 Slider 类。
• 在视频标签中使用自动播放循环静音类（制作循环）。
• 使用 li 标签制作视频列表。
• 使用类为 HTML 元素提供效果。
• 在视频中使用 onClick 事件。

下面是上述方法的实现。

示例：现在我们将了解如何在任何网页上使用 HTML、CSS、JS 创建视频幻灯片动画。

分步实施

第 1 步：创建名为index.html的 HTML 文件并添加以下代码。

index.html

  
    
    
    
    
    
    
    
  
    Video Slide Animation Using HTML | CSS | JS
  
    
    
  
  
    
      
      
  
      
        
          
          
        
        
          
          
        
        
          
          
        
        
          
          
        
      
    
    
      function videoslider(links) {
        document.querySelector(".slider").src = links;
      }
    
  

第 2 步：创建名为style.css的 CSS 文件并添加以下代码。

样式.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
.container {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    background-color: #000000;
    justify-content: center;
    align-items: center;
}
  
.container .slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
  
.container ul {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}
  
.container ul li {
    list-style: none;
    cursor: pointer;
    margin: 10px;
}
  
.container ul li video {
    width: 200px;
    transition: all 0.3s;
}
  
.container ul li video:hover {
    transform: scale(1.1);
}
  
.video {
    width: 100%;
    height: 100%;
}

完整代码：

HTML

  
    
    
    
    
    
    
    
  
    Video Slide Animation Using HTML | CSS | JS
  
    
    
      * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
.container {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    background-color: #000000;
    justify-content: center;
    align-items: center;
}
  
.container .slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
  
.container ul {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}
  
.container ul li {
    list-style: none;
    cursor: pointer;
    margin: 10px;
}
  
.container ul li video {
    width: 200px;
    transition: all 0.3s;
}
  
.container ul li video:hover {
    transform: scale(1.1);
}
  
.video {
    width: 100%;
    height: 100%;
}
    
  
  
    
      
      
  
      
        
          
          
        
        
          
          
        
        
          
          
        
        
          
          
        
      
    
    
      function videoslider(links) {
        document.querySelector(".slider").src = links;
      }
    
  

输出：

现在，正如您在输出中看到的那样，我们使用 CSS 在我们的网页中创建了一个使用 HTML、CSS、JavaScript 的视频幻灯片动画，这将吸引用户在网页上获得更好的用户体验。