HTML5可以實現各種酷炫的頁面效果，以下是一些經典的代碼。

//滑動特效
$(function(){
var winHeight = $(window).height();
$(window).on('scroll', function(){
$('.slideIn').each(function(){
var $this = $(this),
slideInAt = $(window).scrollTop() + winHeight - $this.height() / 2,
objBottom = $this.offset().top + $this.height(),
isHalfShown = slideInAt >$this.offset().top,
isNotScrolledPast = $(window).scrollTop()< objBottom;
if(isHalfShown && isNotScrolledPast){
$this.addClass('active');
}
});
});
});
//翻轉效果
.flip {
-webkit-perspective: 400;
perspective: 400;
}
.flip .card.flipped {
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
.flip .card {
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.flip .card .face {
width: 100%;
height: 100%;
position: absolute;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip .card .front {
background: #333;
color: white;
}
.flip .card .back {
background: #dc143c;
color: white;
-webkit-transform: rotatey(-180deg);
transform: rotatey(-180deg);
}
//輪播效果
.carousel {
position: relative;
width: 100%;
height: 500px;
}
.carousel-inner {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.carousel-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.carousel-item.active {
opacity: 1;
}

以上代碼只是冰山一角，HTML5還可以實現更多獨特的效果，讓你的頁面更加生動有趣。