在網頁設計中，小動畫是一種非常常見的技術，可以給網頁增添活力，吸引用戶眼球，提升用戶體驗。HTML語言是構建網頁的基礎，本文將介紹如何使用HTML實現幾個簡單的小動畫效果，希望對大家有所幫助。
一、純CSS實現按鈕hover效果變換顏色：
<button class="btn">按鈕</button><style>.btn{
padding: 10px 20px;
color: #ffffff;
background-color: #007bff;
border: none;
border-radius: 4px;
transition: background-color 0.3s;
}
.btn:hover{
background-color: #0056b3;
}
</style>
二、使用HTML5 canvas繪制簡單動畫：
<canvas id="myCanvas" width="200" height="200"></canvas><script>var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 200, 200);
setInterval(function(){
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);
}, 500);
</script>
三、使用CSS3動畫實現炫酷的loading效果：
<div class="loading"></div><style>.loading{
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff;
position: relative;
animation: circle 1s linear infinite;
}
.loading:after{
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #007bff;
position: absolute;
left: 0;
top: 20px;
animation: ball 1s linear infinite;
}
@keyframes circle{
0%{
transform: rotateZ(0deg);
}
100%{
transform: rotateZ(360deg);
}
}
@keyframes ball{
0%{
transform: translateX(0px);
}
100%{
transform: translateX(80px);
}
}
</style>
以上是幾個非常簡單的HTML小動畫效果示例，讀者可以按照自己的需求進行修改和優化，實現更加酷炫的效果。