使用HTML CSS JavaScript设计视频滑动动画效果

使用HTML CSS JavaScript设计视频滑动动画效果

如今,视频滑动动画非常流行。在本文中,我们将看到如何在任意网页上使用HTML、CSS和JavaScript制作视频滑动动画。以下是如何完成这个过程的两个步骤。本文将帮助初学者参考这篇文章,使用HTML、CSS和JS构建一些令人惊叹的视频滑动动画。

CSS动画是什么?

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

实现方法:

  • 在HTML文件的body中创建一个容器类。
  • 在video标签中使用Slider类。
  • 在video标签中使用autoplay loop muted类(以实现循环)。
  • 使用li标签创建一个视频列表。
  • 使用类给HTML元素添加效果。
  • 在视频中使用onClick事件。

以下是上述实现方法的示例。

示例: 现在我们将看到如何在任意网页上使用HTML、CSS、JS创建视频滑动动画。

逐步实现:

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

index.html

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <!-- All Meta tags -->
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta name="description" content="Free Web tutorials" /> 
    <meta name="keywords" content="HTML, CSS, JavaScript" /> 
    <meta name="author" content="John Doe" /> 
  
    <title>Video Slide Animation Using HTML | CSS | JS</title> 
  
    <!--Style CSS -->
    <link rel="stylesheet" href="index.css" /> 
  </head> 
  <body> 
    <div class="container"> 
      <video src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20211008154349/Welcome-To-GeeksforGeeks-(0).mp4" 
             class="slider" autoplay loop muted> 
      </video> 
  
      <ul> 
        <li onclick="videoslider 
('https://media.geeksforgeeks.org/wp-content/uploads/20211008154349/Welcome-To-GeeksforGeeks-(0).mp4')"> 
          <video src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20211008154349/Welcome-To-GeeksforGeeks-(0).mp4"> 
          </video> 
        </li> 
        <li onclick="videoslider 
('https://media.geeksforgeeks.org/wp-content/uploads/20211008154455/Welcome-To-GeeksforGeeks-(1).mp4')"> 
          <video src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20211008154455/Welcome-To-GeeksforGeeks-(1).mp4"> 
          </video> 
        </li> 
        <li onclick="videoslider 
('https://media.geeksforgeeks.org/wp-content/uploads/20211008154736/Welcome-To-GeeksforGeeks-(2).mp4')"> 
          <video src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20211008154736/Welcome-To-GeeksforGeeks-(2).mp4"> 
          </video> 
        </li> 
        <li onclick="videoslider 
('https://media.geeksforgeeks.org/wp-content/uploads/20211008155009/Welcome-To-GeeksforGeeks-(3).mp4')"> 
          <video src= 
 "https://media.geeksforgeeks.org/wp-content/uploads/20211008155009/Welcome-To-GeeksforGeeks-(3).mp4"> 
          </video> 
        </li> 
      </ul> 
    </div> 
    <script> 
      function videoslider(links) { 
        document.querySelector(".slider").src = links; 
      } 
    </script> 
  </body> 
</html> 
JavaScript

步骤2: 创建名为style.css的CSS文件,并添加下面的代码。

style.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%; 
}
JavaScript

完整代码:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <!-- All Meta tags -->
    <meta charset="UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta name="description" content="Free Web tutorials" /> 
    <meta name="keywords" content="HTML, CSS, JavaScript" /> 
    <meta name="author" content="John Doe" /> 
  
    <title>Video Slide Animation Using HTML | CSS | JS</title> 
  
    <!--Style CSS -->
    <style> 
      * { 
    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%; 
} 
    </style> 
  </head> 
  <body> 
    <div class="container"> 
      <video src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20211008154349/Welcome-To-GeeksforGeeks-(0).mp4" 
             class="slider" autoplay loop muted> 
      </video> 
  
      <ul> 
        <li onclick="videoslider 
('https://media.geeksforgeeks.org/wp-content/uploads/20211008154349/Welcome-To-GeeksforGeeks-(0).mp4')"> 
          <video src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20211008154349/Welcome-To-GeeksforGeeks-(0).mp4"> 
          </video> 
        </li> 
        <li onclick="videoslider 
('https://media.geeksforgeeks.org/wp-content/uploads/20211008154455/Welcome-To-GeeksforGeeks-(1).mp4')"> 
          <video src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20211008154455/Welcome-To-GeeksforGeeks-(1).mp4"> 
          </video> 
        </li> 
        <li onclick="videoslider 
('https://media.geeksforgeeks.org/wp-content/uploads/20211008154736/Welcome-To-GeeksforGeeks-(2).mp4')"> 
          <video src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20211008154736/Welcome-To-GeeksforGeeks-(2).mp4"> 
          </video> 
        </li> 
        <li onclick="videoslider 
('https://media.geeksforgeeks.org/wp-content/uploads/20211008155009/Welcome-To-GeeksforGeeks-(3).mp4')"> 
          <video src= 
 "https://media.geeksforgeeks.org/wp-content/uploads/20211008155009/Welcome-To-GeeksforGeeks-(3).mp4"> 
          </video> 
        </li> 
      </ul> 
    </div> 
    <script> 
      function videoslider(links) { 
        document.querySelector(".slider").src = links; 
      } 
    </script> 
  </body> 
</html> 
JavaScript

输出:

使用HTML CSS JavaScript设计视频滑动动画效果

现在,正如你在输出中所看到的,我们在网页中使用CSS创建了一个使用HTML、CSS和JavaScript的视频幻灯片动画,这将吸引用户体验到更好的网页体验。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

登录

注册