HTML5和CSS3是現代網頁設計的基礎。在這里，我要分享一些我最近設計的網頁作品中使用的HTML5和CSS3代碼片段。 首先，我要介紹一下一個響應式網站設計的代碼片段。這個設計可以讓頁面在不同的設備上自動適應，無論是在桌面電腦、平板電腦還是智能手機上，都能夠完美呈現。下面是這個代碼片段：

/*響應式網站設計*/
@media only screen and (max-width: 768px) {
/*當屏幕尺寸在768px以下時，執行以下CSS代碼*/
body {
font-size: 16px;
}
.container {
width: 80%;
margin: 0 auto;
}
}
/*當屏幕尺寸在768px以上時，執行以下CSS代碼*/
@media only screen and (min-width: 768px) {
body {
font-size: 18px;
}
.container {
width: 60%;
margin: 0 auto;
}
}

接下來是一個很酷的動畫效果，可以讓網站看起來更加生動有趣。它使用CSS3的transition屬性來實現，代碼如下：

/*動畫效果*/
.box {
width: 100px;
height: 100px;
background: #f00;
transition: background 0.3s ease-in-out;
}
.box:hover {
background: #00f;
}

最后，我要介紹一個基于HTML5的表單設計代碼片段。在這個設計中，我使用了新的表單元素，如input type="email"和input type="tel"，同時還使用了HTML5的表單驗證功能。這個設計可以讓網站的表單看起來更加現代化和易于使用。下面是這個代碼片段：

/*HTML5表單設計*/
電子郵件：

電話號碼：

提交

以上是我近期在網站設計中使用HTML5和CSS3的一些代碼片段。這些代碼讓我的網站看起來更加現代化和易于使用，同時提高了用戶的體驗。如果你需要設計一個響應式網站、精美的動畫效果或者基于HTML5的表單設計，這些代碼片段會給你提供很好的靈感。