帮我写一个html界面,界面正中心有一个圆形的按钮。按钮文字起床打卡,会发光,点击时有水波纹特效,界面背景用科技感填充
时间: 2023-04-09 16:04:39 浏览: 56
好的,以下是一个简单的 HTML 界面,其中包含一个圆形按钮,按钮上的文字是“起床打卡”,点击时会有水波纹特效,界面背景使用了科技感填充。
```html
<!DOCTYPE html>
<html>
<head>
<title>科技感界面</title>
<style>
body {
background-color: #1c1c1c;
background-image: linear-gradient(45deg, #000000 25%, #0f0f0f 25%, #0f0f0f 50%, #000000 50%, #000000 75%, #0f0f0f 75%, #0f0f0f 100%);
background-size: 50px 50px;
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 0;
padding: 0;
text-align: center;
}
#button {
background-color: #00bfff;
border-radius: 50%;
box-shadow: 0 0 10px #00bfff;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-size: 24px;
height: 100px;
line-height: 100px;
margin-top: 100px;
position: relative;
text-align: center;
width: 100px;
}
#button:hover {
background-color: #00e5ff;
box-shadow: 0 0 20px #00e5ff;
}
#button:active {
background-color: #00ffff;
box-shadow: 0 0 30px #00ffff;
}
#button:before {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
content: "";
display: block;
height: 100%;
left: -50%;
position: absolute;
top: -50%;
width: 100%;
z-index: -1;
}
#button:after {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 50%;
content: "";
display: block;
height: 100%;
left: -50%;
position: absolute;
top: -50%;
width: 100%;
z-index: -1;
animation: ripple 1s linear;
animation-fill-mode: forwards;
opacity: 0;
}
@keyframes ripple {
to {
transform: scale(2);
opacity: 0;
}
}
</style>
</head>
<body>
<div id="button">起床打卡</div>
</body>
</html>
```
希望这个 HTML 界面能够满足您的需求!