首页 >
1. 图片悬停效果
当鼠标悬停在图片上时，图片放大并且有阴影效果，让用户感觉更加立体。
g-hover {line-block: relative
}gg {sitionsform .5s ease
}gg {sform: scale(1.2)
box-shadow: 0 0 10px rgba(0, 0, 0, .5)
}
g-hover”>gage.jpg” alt=”图片”>
2. 图片轮播效果
图片轮播效果可以让多张图片轮流展示，让用户感受到视觉冲击力。
g-carousel {: relative
width: 800px
height: 400px
}gg {: absolute
top: 0
left: 0
opacity: 0sition: opacity 1s ease
}gg.active {
opacity: 1
}
g-carousel”>gage1.jpg” alt=”图片1″>gage2.jpg” alt=”图片2″>gage3.jpg” alt=”图片3″>
gsentgg’)dex = 0tervalction() {dex++dexgsgth) {dex = 0
}gsctiong) {gove(‘active’)
})gsdex].classList.add(‘active’)
}, 3000)
3. 图片滚动效果
图片滚动效果可以让多张图片在一个区域内滚动展示，增加网页的动态感。
g-scroll {: relative
width: 800px
height: 400px
}gg {
float: leftargin-right: 20px
}
g-scroll”>gage1.jpg” alt=”图片1″>gage2.jpg” alt=”图片2″>gage3.jpg” alt=”图片3″>gage4.jpg” alt=”图片4″>gage5.jpg” alt=”图片5″>
gScrollentg-scroll’)gsentgg’)gWidthgs[0].offsetWidthdex = 0tervalction() {dex++dexgsgth) {dex = 0
}gScrolldexgWidth
}, 3000)
以上就是几个HTML图片特效的代码实例分享，希望能够帮助你打造出炫酷的网站。记得要根据自己的需要进行修改和优化，让代码更加适合自己的网站。
HTML播放视频的代码详解（从入门到精通） |2015年html5游戏开发者大会 | HTML播放视频的代码详解（从入门到精通） |2015年html5游戏开发者大会 ...
HTML标签设置文本格式（从入门到精通，让你的网页排版更美观） |html投票活动中心模板 | HTML标签设置文本格式（从入门到精通，让你的网页排版更美观） |html投票活动中心模板 ...