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