Html5開關效果代碼是現在web前端開發中廣泛使用的效果，因為它可以在頁面上呈現出一種獨特的交互體驗，下面是一個 html5 開關效果的代碼示例：

<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>

這段代碼中，我們使用了 label 元素作為容器，并在其中添加 input 和 span 標簽。

input 標簽的 type 屬性設置為 checkbox，它的作用是將它的值設為布爾型變量，即開關狀態；而 span 元素則是用來顯示開關按鈕圓形的效果。

接下來，我們需要在樣式表中添加樣式：

.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}

我們首先設置了 .switch 容器的 position 屬性為 relative，這使得我們可以在之后設置 .slider 的 position 屬性為 absolute 并使用 top，left，right 和 bottom 來設置元素的位置，從而達到了相對于容器居中的目的。

我們還將 .slider 的背景顏色設置為 #ccc，文本顏色設置為白色，并設置了未選中的狀態下的 .slider:before 元素的背景顏色為白色，選中狀態下的 .slider:before 元素的位置為右側邊界，用來顯示一個開關帶上一個小圓點的效果。

input:checked + .slider 的作用是設置選中狀態下的 .slider 的背景顏色為 #2196F3，同時設置 .slider:before 的位置偏移量為 26px，顯示出一個圓形的帶鈕開關效果。

在代碼中，我們還使用了 transition 屬性來實現開關狀態切換時的過渡效果，為 .switch 容器和 .slider 添加了圓角效果等等。

這是如何使用 html5 開關效果代碼創建一個開關效果的全部過程。這個效果可以在任何需要高效的交互體驗的web應用的用戶界面上使用。