HTML5和CSS3示例

HTML5和CSS3是當前前端開發中最常用和流行的技術。　下面將展示一些HTML5和CSS3示例，幫助我們更好的了解這兩種技術的應用。

示例一：使用CSS3實現動畫效果

/*CSS3代碼*/
.box {
width: 100px;
height: 100px;
background: red;
opacity: 0.5;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
-webkit-animation: move 2s ease-in-out infinite alternate;
}
@-webkit-keyframes move {
0% {
-webkit-transform: translateX(-100px);
}
100% {
-webkit-transform: translateX(100px);
}
}

以上代碼可以在任意元素上實現水平平移，由于使用了CSS3動畫技術，所以效果比JavaScript實現更加流暢自然。

示例二：使用HTML5多媒體和CSS3樣式實現音樂播放器

/*CSS3代碼*/
#audioPlayer {
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
height: 50px;
background-color: #222;
color: #DDD;
z-index: 1000;
}
#audioControls {
margin: 4px;
position: relative;
}
#audioControls span {
background-image: url(images/audioSprite.png);
background-repeat: no-repeat;
display: inline-block;
height: 28px;
width: 28px;
}
#playpause {
background-position: 0px 0px;
}
#mute {
background-position: -56px 0px;
}
#volume {
background-position: -84px 0px;
}
#duration {
position: absolute;
right: 45px;
top: 13px;
}
#currentTime {
position: absolute;
left: 45px;
top: 13px;
}

以上示例中， 內嵌了一個音頻元素并使用了HTML5的新特性來控制其播放、暫停、靜音等。結合CSS3樣式做了一個簡單的音樂播放器。

示例三：使用HTML5 canvas API繪制圖像

// JavaScript代碼
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,100,50,0,2*Math.PI,false);
ctx.fillStyle="#FF0000";
ctx.fill();
ctx.lineWidth = 3;
ctx.strokeStyle = '#000000';
ctx.stroke();

以上示例使用canvas API繪制了一個紅色圓形并進行了邊框線條繪制。canvas API是HTML5新添加的功能，它提供了一種使用JavaScript繪制圖形的方式，可以是我們的前端界面更加靈活多樣化。