html
复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>水表电表</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #0a1f19;
color: #ffffff;
text-shadow: 1px 1px 1px #000000;
text-align: center;
}
.meter-row,
.date-row {
width: 100%;
margin: 20px auto;
min-width: 420px;
max-width: 600px;
border-radius: 30px 30px 0 0px;
padding: 12px;
border-radius: 30px;
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2),
0 0 1px 2px black,
inset 0 2px 2px -2px white,
inset 0 0 2px 9px #47434c,
inset 0 0 2px 10px #ff0000;
}
.meter-row {
display: flex;
}
.date-column {
display: flex;
align-items: center;
justify-content: space-evenly;
background-color: #144756;
margin: 0 10px;
}
/*日期标题 */
.date {
transform: scale(1);
margin: -180px 10px 0px -95px;
}
.year {
position: relative;
top: 35px;
left: 6px;
padding: 15px 16px 25px 12px;
border-radius: 10px 10px 0 0;
color: rgb(234, 255, 0);
background-color: #ff0000;
}
h1 {
position: absolute;
border: 5px solid #333;
width: 135px;
line-height: 115px;
font-size: 60px;
letter-spacing: -3px;
-webkit-text-fill-color: transparent;
border-radius: 20px 10px 10px 10px;
box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);
}
.month1 {
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
text-shadow: 1px 1px 1px #d1ec04;
-webkit-text-stroke: #fffbfb 1px;
}
.month2 {
clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
transform: translateY(1px);
z-index: 20;
text-shadow: 1px 1px 1px #ff0303;
-webkit-text-stroke: #ffffff 1px;
}
/*日期标题 结束*/
.common-span {
color: #ffff00;
position: relative;
border-radius: 3px;
font-size: 30px;
padding: 0 5px;
font-weight: bold;
box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.589), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
.common-span::before {
content: "";
background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%,
linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 5px;
transform: scale(0.9);
}
.common-h2 {
background-color: #28a7462e;
color: white;
border-radius: 0 0 2px 2px;
}
/* 水表 */
.water-meter {
width: 90px;
height: 90px;
margin: 0 10px;
border-radius: 75px;
background: #e0f7fa;
border: 5px solid #0288d1;
position: relative;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.water-meter h2 {
color: white;
background: linear-gradient(to top, #0091ea, #00bcd4);
border-radius: 0 0 75px 75px;
}
.water-meter p {
animation: backgroundChange2 10s infinite;
margin: 4px;
font-size: 25px;
font-weight: bold;
padding: 0 7px 3px 5px;
}
/* 电表 */
.electric-meter {
border: 5px solid #333;
border-radius: 10px;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.electric-meter h2 {
background-color: #28a745;
color: white;
border-radius: 0 0 2px 2px;
}
.electric-meter p {
margin: 4px;
font-size: 25px;
font-weight: bold;
padding: 0 7px 3px 5px;
}
.water-meter p {
animation: backgroundChange2 10s infinite;
}
.electric-meter p {
animation: backgroundChange 10s infinite;
}
@keyframes backgroundChange2 {
0%,
10%,
20%,
30%,
40%,
50%,
60%,
70%,
80%,
90%,
100% {
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black,
inset 0 2px 2px -2px white, inset 0 0 2px 7px #47434c,
inset 0 0 2px 22px #ff0000;
color: #cfd601;
border-radius: 33px 33px 0 0;
}
5%,
15%,
25%,
35%,
45%,
55%,
65%,
75%,
85%,
95% {
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black,
inset 0 2px 2px -2px white, inset 0 0 2px 7px #47434c,
inset 0 0 2px 22px #f6ff00;
color: #ffffff;
border-radius: 30px 30px 0 0;
}
}
@keyframes backgroundChange {
0%,
10%,
20%,
30%,
40%,
50%,
60%,
70%,
80%,
90%,
100% {
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black,
inset 0 2px 2px -2px white, inset 0 0 2px 7px #47434c,
inset 0 0 2px 22px #ff0000;
color: #cfd601;
border-radius: 2px;
}
5%,
15%,
25%,
35%,
45%,
55%,
65%,
75%,
85%,
95% {
box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black,
inset 0 2px 2px -2px white, inset 0 0 2px 7px #47434c,
inset 0 0 2px 22px #f6ff00;
color: #ffffff;
border-radius: 5px;
}
}
.remarks,
.total-cost {
background-color: #28a745;
border-radius: 30px 30px 0 0;
margin: 10px 10px 0 10px;
padding-left: 50px;
}
.total-cost sub {
background-color: #285ba79d;
border-radius: 3px;
}
/* 备注 */
.remarks {
border-radius: 0 0 30px 30px;
}
.remarks b {
color: #ffff00;
}
/* 备注 结束 */
/* 下面的电表 */
.meter {
width: 300px;
height: 150px;
border: 5px solid #333;
border-radius: 10px;
background: linear-gradient(to bottom, #fff, #e6e6e6);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
position: relative;
text-align: center;
font-family: 'Arial', sans-serif;
}
.meter .dial {
width: 80%;
height: 80%;
border: 3px solid #333;
border-radius: 50%;
position: absolute;
top: 10%;
left: 10%;
display: flex;
justify-content: center;
align-items: center;
}
.needle {
width: 2px;
height: 40%;
background: red;
position: absolute;
bottom: 50%;
transform-origin: bottom;
transition: transform 0.5s ease-out;
}
.reading {
font-size: 24px;
margin-top: 20px;
}
.button {
padding: 10px 20px;
margin-top: 20px;
background-color: #28a745;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button:hover {
background-color: #218838;
}
.water-meter2 {
width: 150px;
height: 150px;
border-radius: 75px;
background: #e0f7fa;
border: 10px solid #0288d1;
position: relative;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.water-level {
position: absolute;
bottom: -10px;
left: 0%;
width: 100%;
background: linear-gradient(to top, #0091ea, #079aad);
border-radius: 0 0 75px 75px;
transition: height 0.3s ease;
height: 0;
animation: wave 1s infinite ease-in-out;
}
@keyframes wave {
0% {
background-position: 0% 0%;
}
100% {
background-position: 100% 20%;
}
}
.indicator {
position: absolute;
width: 10px;
height: 10px;
background: red;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
/* 添加波浪效果背景 */
.water-level {
position: absolute;
bottom: -10px;
left: 0%;
width: 100%;
background: linear-gradient(to top, #00bcd4, #00695c);
/* 修改了颜色 */
border-radius: 0 0 75px 75px;
transition: height 0.3s ease;
height: 0;
animation: wave 1s infinite ease-in-out;
background-size: 20% 20%;
/* 背景大小用于波动效果 */
}
</style>
</head>
<body>
<div class="date-row">
<div class="total-cost">
<sub>总房租0元</sub>
<sub>总水费 0元</sub>
<sub>总电费0元</sub>
<sub>总合计 0元</sub>
</div>
<div class="date-column">
<div class="date">
<div class="year-month">
<sub class="year">2024年</sub>
<h1 class="month1">10月</h1>
</div>
<h1 class="month2">10月</h1>
</div>
<div class="water-meter">
<p>71</p>
<h2>水表</h2>
</div>
<div class="electric-meter">
<p class="common-span">2600</p>
<h2>电表</h2>
</div>
</div>
<div class="remarks"><b>备注:</b><span>哔哩吧啦哔哩吧啦</span></div>
</div>
<div class="meter-row">
<div class="meter">
<div class="dial">
<div class="needle" id="needle"></div>
</div>
<div class="reading" id="reading">0 kWh</div>
</div>
<div class="meter">
<div class="reading" id="meterReading">0 kWh</div>
<button class="button" onclick="increaseReading()">增加用电量</button>
</div>
<div class="water-meter2">
<div class="water-level" style="height: 60%; animation: wave 1s infinite ease-in-out;"><span></span></div>
<div class="indicator"></div>
</div>
</div>
</body>
<script>
const needle = document.getElementById('needle');
const reading = document.getElementById('reading');
// 随机生成电表读数
function updateMeter() {
const value = Math.floor(Math.random() * 100); // 0-99 kWh
const angle = (value / 100) * 180; // 转换为角度 (0-180度)
needle.style.transform = `rotate(${-90 + angle}deg)`; // 调整方向
reading.innerText = `${value} kWh`; // 更新读数
}
// 每隔2秒更新一次读数
setInterval(updateMeter, 2000);
let currentReading = 0;
function increaseReading() {
currentReading += Math.floor(Math.random() * 10) + 1; // 随机增加1到10之间的用电量
document.getElementById('meterReading').innerText = currentReading + ' kWh';
}
</script>
</html>
