DW網(wǎng)頁(yè)HTML特效代碼大全，是一個(gè)專(zhuān)門(mén)收集整理DW網(wǎng)頁(yè)HTML特效示例的網(wǎng)站。通過(guò)這個(gè)網(wǎng)站，你可以快速找到你所需要的DW網(wǎng)頁(yè)HTML特效示例，以及詳細(xì)的代碼講解和應(yīng)用方法。下面我們就來(lái)介紹一些經(jīng)典的DW網(wǎng)頁(yè)HTML特效示例。

1、加載動(dòng)畫(huà)特效

.loading {
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index:9999
}
.circle {
width:50px;
height:50px;
border-radius:50%;
border-top:4px solid #1abc9c;
border-right:4px solid transparent;
animation:spin .5s linear infinite;
}
@keyframes spin {
to { transform:rotate(360deg); }
}

2、響應(yīng)式導(dǎo)航菜單特效

.menuToggle {
position: absolute;
right: 15px;
top: 15px;
z-index: 9999;
cursor: pointer;
}
.menuToggle i {
display: block;
width: 20px;
height: 3px;
margin-bottom: 5px;
position: relative;
background: #fff;
transition: transform .25s ease-out;
}
#menuCheckbox {
display: none;
}
#menuCheckbox:checked ~ .menu {
display: block;
}
#menuCheckbox:checked ~ .menuToggle i:first-child {
transform: translateY(8px) rotate(45deg);
}
#menuCheckbox:checked ~ .menuToggle i:nth-child(2) {
opacity: 0;
}
#menuCheckbox:checked ~ .menuToggle i:last-child {
transform: translateY(-8px) rotate(-45deg);
}

3、全屏滾動(dòng)特效

Slide 1
Slide 2
Slide 3
.container {
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}
.slide {
height: 100vh;
width: 100%;
text-align: center;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.slide h2 {
font-size: 5em;
text-transform: uppercase;
color: #fff;
}
.slide1 {
background: #3498db;
}
.slide2 {
background: #2ecc71;
}
.slide3 {
background: #f1c40f;
}

以上就是幾個(gè)DW網(wǎng)頁(yè)HTML特效實(shí)例以及對(duì)應(yīng)的代碼，希望對(duì)你有幫助。