HTML是一種標(biāo)記語言，通過標(biāo)簽來定義文檔內(nèi)容的格式。在網(wǎng)頁開發(fā)中，我們經(jīng)常需求添加彈出效果，來提高用戶體驗(yàn)。下面我們來看一下幾種常見的HTML彈出動畫效果。

1. CSS3實(shí)現(xiàn)彈出

<div class="popup">
<p>這里是彈出內(nèi)容</p>
<button class="close-btn">關(guān)閉</button>
</div>
<style>
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
animation: pop .5s forwards;
}
.close-btn {
position: absolute;
top: 5px;
right: 5px;
}
@keyframes pop {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}
</style>

2. jQuery實(shí)現(xiàn)彈出

<div class="popup">
<p>這里是彈出內(nèi)容</p>
<button class="close-btn">關(guān)閉</button>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function() {
$('.popup').fadeIn();
$('.close-btn').click(function() {
$('.popup').fadeOut();
});
});
</script>

3. JavaScript實(shí)現(xiàn)彈出

<div class="popup">
<p>這里是彈出內(nèi)容</p>
<button class="close-btn">關(guān)閉</button>
</div>
<script>
const popup = document.querySelector('.popup');
const closeBtn = document.querySelector('.close-btn');
popup.style.opacity = 0;
popup.style.display = 'block';
const animatePopup = () =>{
let opa = parseFloat(popup.style.opacity);
if(opa == 1) {
return;
}
opa += 0.1;
popup.style.opacity = opa;
requestAnimationFrame(animatePopup);
}
animatePopup();
closeBtn.addEventListener('click', () =>{
popup.style.display = 'none';
})
</script>

這些動畫效果都有相應(yīng)的優(yōu)缺點(diǎn)，可以根據(jù)需求來選擇適合自己的方式。