HTML5和CSS3是現(xiàn)代網(wǎng)頁設(shè)計(jì)中最常用的技術(shù)，它們可以帶來各種炫酷的頁面效果。下面是一些常見的HTML5和CSS3頁面效果及其代碼示例，希望能為大家提供參考。 一、響應(yīng)式網(wǎng)頁設(shè)計(jì) 響應(yīng)式網(wǎng)頁設(shè)計(jì)是為了適應(yīng)不同設(shè)備屏幕大小而產(chǎn)生的設(shè)計(jì)技術(shù)。實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)的方法主要有兩種：媒體查詢和彈性布局。下面分別列出它們的代碼示例： 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;
}

二、滑動(dòng)效果 滑動(dòng)效果是網(wǎng)頁設(shè)計(jì)中常用的一種動(dòng)效，它能夠吸引用戶的注意力，使頁面更具交互性。下面是一個(gè)使用CSS3實(shí)現(xiàn)的滑動(dòng)效果：

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

三、背景漸變 背景漸變能夠讓頁面看起來更加美觀，有時(shí)還能起到突出重點(diǎn)的作用。下面是一個(gè)使用CSS3實(shí)現(xiàn)的背景漸變效果：

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

四、旋轉(zhuǎn)效果 旋轉(zhuǎn)效果能夠讓頁面元素產(chǎn)生立體感，讓用戶有更好的視覺體驗(yàn)。下面是一個(gè)使用CSS3實(shí)現(xiàn)的旋轉(zhuǎn)效果：

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

以上是一些常見的HTML5和CSS3頁面效果及其代碼示例，希望能夠?yàn)榇蠹业木W(wǎng)頁設(shè)計(jì)帶來靈感。