帮我写一个html界面,界面中间有一个圆形的按钮,会发光,点击时有水波纹特效,界面背景用科技感填充
时间: 2023-04-09 10:04:36 浏览: 101
好的,我可以为您提供一个简单的 HTML 界面,其中包含一个圆形按钮和水波纹特效。以下是代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>科技感界面</title>
<style>
body {
background-color: #333;
background-image: linear-gradient(45deg, #00c6ff, #0072ff);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
font-family: Arial, sans-serif;
color: #fff;
text-align: center;
}
#button {
display: inline-block;
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
transition: box-shadow 0.3s ease-in-out;
cursor: pointer;
}
#button:hover {
box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
}
#button:active {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
#button:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
opacity: 0;
transition: opacity 0.3s ease-in-out, width 0.3s ease-in-out, height 0.3s ease-in-out;
}
#button:active:after {
opacity: 1;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="button"></div>
<script>
var button = document.getElementById("button");
button.addEventListener("mousedown", function(e) {
var ripple = document.createElement("div");
ripple.style.width = ripple.style.height = Math.max(button.offsetWidth, button.offsetHeight) + "px";
ripple.style.left = e.clientX - button.offsetLeft - ripple.offsetWidth / 2 + "px";
ripple.style.top = e.clientY - button.offsetTop - ripple.offsetHeight / 2 + "px";
ripple.classList.add("ripple");
button.appendChild(ripple);
setTimeout(function() {
ripple.parentNode.removeChild(ripple);
}, 1000);
});
</script>
</body>
</html>
```
希望这个代码示例能够帮助您实现您的科技感界面。