CSS和JS是前端開發中的重要組成部分，它們可以實現許多酷炫的效果。其中，點擊屏幕效果是一種常見的效果。下面我們將介紹如何使用CSS和JS實現點擊屏幕效果。

/*CSS代碼*/
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #1f2a30;
}
#click-effect-container {
position: relative;
width: 300px;
height: 300px;
}
#click-effect-container .circle {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #4fb4c0;
opacity: 0;
transition: all 0.3s ease;
}
#click-effect-container .circle.show {
opacity: 0.5;
transform: scale(5);
}

首先，我們需要創建一個DIV容器，用于承載點擊效果。然后，我們將其設置為相對定位，并設置寬度和高度。在容器中，我們創建一個圓形元素，用于實現點擊效果。這個圓形元素需要設置為絕對定位，并將其位置設置為容器左上角。我們還需要給圓形元素設置寬度、高度、圓角、背景色和不透明度，并設置過渡效果。

//JS代碼
const container = document.getElementById('click-effect-container');
container.addEventListener('click', function(e) {
const circle = document.createElement('div');
circle.classList.add('circle');
circle.style.top = e.clientY - e.target.getBoundingClientRect().top + 'px';
circle.style.left = e.clientX - e.target.getBoundingClientRect().left + 'px';
container.appendChild(circle);
setTimeout(() =>circle.remove(), 500);
});

接下來，我們需要使用JS代碼為容器添加點擊事件。當用戶點擊容器時，我們將創建一個新的圓形元素，并將其添加到容器中。我們還需要修改圓形元素的位置，使其出現在用戶點擊的位置。最后，我們使用setTimeout函數將新創建的圓形元素刪除，以防止DOM節點過多。

通過以上CSS和JS代碼，我們可以實現一個簡單的點擊屏幕效果，給網頁增加一些趣味性。