CSS自動跳起網站提示是一種常用的網頁設計技巧,可以為用戶提供更好的頁面交互體驗。以下是實現這種效果的具體方法。
/* 首先,我們需要給提示信息設置一個類名 */ .info { position: fixed; /* 讓提示信息在窗口固定位置顯示 */ bottom: -100%; /* 初始時,讓提示信息隱藏在窗口底部 */ left: 50%; /* 讓提示信息居中顯示 */ transform: translateX(-50%); /* 讓提示信息水平平移至中心 */ background-color: #333; /* 設置提示信息的背景色 */ color: #fff; /* 設置提示信息的字體顏色 */ padding: 10px 20px; /* 設置提示信息的內邊距 */ transition: all 0.5s ease; /* 添加過渡效果,以實現平滑的跳起動畫 */ } /* 接著,我們需要寫一個函數,用于控制提示信息的跳起效果 */ function showInfo() { var infoBox = document.querySelector('.info'); infoBox.style.bottom = '20px'; /* 將提示信息向上移動至跳起位置 */ setTimeout(function() { /* 等待0.5s,使提示信息保持在跳起位置約3s */ infoBox.style.bottom = '-100%'; /* 讓提示信息再次下降隱藏 */ }, 3000); } /* 最后,在頁面加載完成后調用函數,以顯示提示信息 */ window.onload = function() { showInfo(); }
使用上述代碼,我們可以輕松地為網頁添加一個自動跳起的提示信息,為用戶提供更好的交互體驗。
上一篇css自動連跳指令