CSS效果可以為網(wǎng)頁增加豐富多彩的視覺呈現(xiàn)。本文介紹一種特殊的CSS效果——刷新彈出效果。

這種效果在用戶刷新頁面時(shí)，會(huì)彈出一個(gè)提示框告訴用戶，新內(nèi)容已經(jīng)加載完成。這種效果可以提高用戶體驗(yàn)，讓用戶在等待頁面加載時(shí)有更好的交互體驗(yàn)。

//刷新彈出效果CSS代碼
.pop-up {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s ease-in-out;
}
.pop-up__message {
background-color: white;
color: black;
text-align: center;
padding: 20px;
border-radius: 5px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.pop-up__message__button {
background-color: #2ecc71;
color: white;
border: none;
border-radius: 5px;
padding: 10px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
.pop-up__message__button:hover {
background-color: #27ae60;
}
.pop-up__message__button:active {
transform: translateY(2px);
}
.pop-up--show {
visibility: visible;
opacity: 1;
}

以上是刷新彈出效果的CSS代碼，其中包括了彈出框的樣式和控制彈出框的JavaScript代碼。

這個(gè)效果的實(shí)現(xiàn)需要用到JavaScript，具體實(shí)現(xiàn)方式可以參考下面的代碼：

//刷新彈出框JavaScript代碼
window.addEventListener('beforeunload', function(e) {
var popUp = document.createElement('div');
popUp.classList.add('pop-up');
var message = document.createElement('div');
message.classList.add('pop-up__message');
message.innerHTML = '新內(nèi)容加載完成！';
var button = document.createElement('button');
button.classList.add('pop-up__message__button');
button.innerHTML = '確定';
button.addEventListener('click', function() {
popUp.classList.remove('pop-up--show');
});
message.appendChild(button);
popUp.appendChild(message);
document.body.appendChild(popUp);
setTimeout(function() {
popUp.classList.add('pop-up--show');
}, 500);
});

在頁面加載時(shí)添加以上代碼即可實(shí)現(xiàn)刷新彈出效果。