html5背景特效代碼

在網站設計中，背景特效可以為網頁增添生動趣味，帶給用戶更好的體驗。HTML5作為一種新型的網頁開發技術，也提供了許多豐富多彩的背景特效展現方式，下面是一些HTML5背景特效代碼的介紹。

/* 1. 線性漸變背景 */
background: linear-gradient(to bottom right, #FF0066, #333399);
/* 2. 徑向漸變背景 */
background: radial-gradient(circle, #FF00CC, #333399);
/* 3. 圖片背景 */
background: url('img/background.jpg');
/* 4. 視頻背景 *//* 5. 粒子背景 */
/* HTML *//* CSS */
#particles {
position: absolute;
width: 100%;
height: 100%;
}
/* Javascript */
// 引入particles.js庫
particlesJS.load('particles', 'js/particles.json');
/* 6. 3D效果背景 */
/* HTML *//* CSS */
.box {
width: 200px;
height: 200px;
perspective: 500px;
background: linear-gradient(to bottom right, #FF0066, #333399);
}
.box:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: url('img/texture.jpg');
transform: rotateY(45deg);
transform-origin: right;
opacity: 0.8;
}
/* 7. 輪播圖背景 */
/* HTML */
/* CSS */
.bg-slideshow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.bg-slideshow >div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: bg-slideshow 20s linear infinite;
}
.bg-slideshow >div:nth-child(1) {
background-image: url('img/bg1.jpg');
}
.bg-slideshow >div:nth-child(2) {
animation-delay: 5s;
background-image: url('img/bg2.jpg');
}
.bg-slideshow >div:nth-child(3) {
animation-delay: 10s;
background-image: url('img/bg3.jpg');
}
@keyframes bg-slideshow {
0% {
opacity: 0;
}
5% {
opacity: 1;
}
25% {
opacity: 1;
}
30% {
opacity: 0;
}
100% {
opacity: 0;
}
}