HTML5，全称是Hyper Text Markup Language 5，是一种用于创建网页的标准标记语言，HTML5引入了许多新的元素和属性，使得网页设计更加丰富多样，本文将介绍一些常用的HTML5特效代码，包括动画、交互、音频视频等。
1、动画效果
使用CSS3的transition和animation属性可以实现简单的动画效果，以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: move;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes move {
0% { left: 0; top: 0; }
25% { left: 200px; top: 0; }
50% { left: 200px; top: 200px; }
75% { left: 0; top: 200px; }
100% { left: 0; top: 0; }
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
2、交互效果
使用JavaScript和HTML5的addEventListener方法可以实现交互效果，以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<style>
button {
font-size: 24px;
padding: 10px;
}
</style>
<script>
function changeColor() {
var color = document.getElementById("color").value;
document.body.style.backgroundColor = color;
}
</script>
</head>
<body>
<input type="text" id="color" placeholder="输入颜色">
<button onclick="changeColor()">改变背景颜色</button>
</body>
</html>
3、音频视频播放
使用HTML5的<audio>和<video>标签可以实现音频和视频的播放，以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<style>
video {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<video controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
</body>
</html>
以上只是HTML5特效代码的一部分，实际上还有很多其他的特效可以使用，通过学习和实践，你可以掌握更多的HTML5技巧，为你的网页增添更多的魅力。
发表评论