HTML5和CSS3是現代網頁設計中最常用的技術，它們可以帶來各種炫酷的頁面效果。下面是一些常見的HTML5和CSS3頁面效果及其代碼示例，希望能為大家提供參考。 一、響應式網頁設計 響應式網頁設計是為了適應不同設備屏幕大小而產生的設計技術。實現響應式設計的方法主要有兩種：媒體查詢和彈性布局。下面分別列出它們的代碼示例： 1.媒體查詢

@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

2.彈性布局

.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex-basis: calc(100%/3 - 20px);
margin: 10px;
}

二、滑動效果 滑動效果是網頁設計中常用的一種動效，它能夠吸引用戶的注意力，使頁面更具交互性。下面是一個使用CSS3實現的滑動效果：

.slide-in {
opacity: 0;
transform: translateY(100%);
}
.slide-in.active {
opacity: 1;
transform: translateY(0%);
transition: all 0.5s ease-in-out;
}

三、背景漸變 背景漸變能夠讓頁面看起來更加美觀，有時還能起到突出重點的作用。下面是一個使用CSS3實現的背景漸變效果：

.background {
background: linear-gradient(to right, #fc4a1a, #f7b733);
}

四、旋轉效果 旋轉效果能夠讓頁面元素產生立體感，讓用戶有更好的視覺體驗。下面是一個使用CSS3實現的旋轉效果：

.rotate {
transform: rotate(45deg);
transition: all 0.5s ease-in-out;
}
.rotate:hover {
transform: rotate(90deg);
}

以上是一些常見的HTML5和CSS3頁面效果及其代碼示例，希望能夠為大家的網頁設計帶來靈感。