H5 CSS3視頻教程

隨著移動互聯網的發展，H5和CSS3成為前端開發的必備技能。如果你還沒有掌握這些技能，那么你可以參考以下視頻教程：

<video src="h5css3tutorial.mp4" controls>
您的瀏覽器不支持視頻播放。
</video>

以上代碼是一個簡單的視頻播放器示例，<video>標簽是HTML5為了實現video視頻播放而推出的標簽，其中src表示視頻文件的鏈接地址，controls用于顯示視頻控制欄。

除了視頻標簽，CSS3也為開發者提供了很多新的樣式和效果，比如border-radius、box-shadow、animation等屬性。以下是一個利用CSS3實現文字懸浮效果的示例：

<style>
.hover {
transform: translateY(-10px);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
</style>
<p>鼠標懸浮文字</p>
<script>
const p = document.querySelector('p');
p.addEventListener('mouseenter', e =>{
p.classList.add('hover');
});
p.addEventListener('mouseleave', e =>{
p.classList.remove('hover');
});
</script>

以上代碼中，.hover類的樣式用于實現文字懸浮效果，transform屬性用于向上移動文字，box-shadow屬性用于添加陰影，從而提高文字的立體感。同時，利用JavaScript監聽mouseenter和mouseleave事件，實現鼠標懸浮時添加樣式、離開時刪除樣式。

總之，H5和CSS3的學習離不開實踐，多動手寫代碼，嘗試各種效果，才能更好地掌握它們。