可以把代码全写出来吗
时间: 2023-10-22 16:04:58 浏览: 35
当然可以,以下是完整的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Click Circle</title>
<style>
/* 圆形样式 */
.circle {
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
background-color: rgba(255,255,255,.3);
pointer-events: none;
}
</style>
</head>
<body>
<script>
// 获取屏幕宽高
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
// 监听点击事件
document.addEventListener('click', function(e) {
// 创建元素
var circle = document.createElement('div');
circle.classList.add('circle');
document.body.appendChild(circle);
// 设置圆的初始位置和大小
var x = e.clientX;
var y = e.clientY;
circle.style.left = x + 'px';
circle.style.top = y + 'px';
circle.style.width = '0';
circle.style.height = '0';
// 动画效果
var size = Math.max(screenWidth, screenHeight) * 2;
circle.style.transition = 'all .5s ease-out';
circle.style.transform = 'translate(-50%, -50%) scale(' + (size / 100) + ')';
// 删除元素
setTimeout(function() {
circle.parentNode.removeChild(circle);
}, 500);
});
</script>
</body>
</html>
```
这个示例代码包含了 HTML、CSS 和 JavaScript 代码,可以直接在浏览器中运行。在页面中点击任意位置,就会出现一个圆形元素并以动画效果扩散至整个屏幕,然后自动消失。