好玩的水表电表

于 2024-10-01 15:16:55 发布
阅读量212 收藏
点赞数 6
文章标签： css css3 html 好玩的电表水表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lulei5153/article/details/142668488
版权

c34cededdfd6495b9edecf6901cd50a2.gif

<!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>

 

 

与妖为邻
关注
IC卡预付费水表电表一卡通方案.docx
11-24
IC卡预付费水表电表一卡通方案 一、IC卡预付费水表电表一卡通管理系统优点 1. 代替人工抄表：IC卡预付费水表电表一卡通管理系统可以代替人工抄表，减少人工抄表的错误和不便，提高了抄表的效率和准确性。 2. 无需...
电子-一种水表电表观测仪
09-15
标题中的“电子-一种水表电表观测仪”指的是一个电子设备，主要用于监测和读取水表和电表的数据。这种设备通常集成了先进的传感器技术和数据处理能力，以数字化的方式替代传统的手动读表，提高了效率和准确性。在...
水表电表的远程抄表计量解决方案
05-16
远程抄表计量解决方案是一种高效、智能的管理方式，尤其在水表和电表的计量领域。这种技术使得管理人员能够在远程位置获取实时的用水量和用电量数据，无需手动现场抄表，大大提高了工作效率，减少了人力成本，同时也...
IC卡预付费水表电表一卡通方案.pdf
11-24
"IC卡预付费水表电表一卡通方案" IC卡预付费水表电表一卡通管理系统方案是基于IC卡技术的预付费管理系统，旨在解决传统抄表付费的用水方式。该系统由IC卡预付费水表、IC卡电表、IC卡读写器、管理系统软件和IC卡组成...
1702SLSOURCECODE.rar_1702SLSOURCECODE_FM1702_水表_电表
07-13
FM1702芯片开发板源码采用AT89C52单片机控制射频芯片1702可以用在水表电表等上面-FM1702 chip development board source control using AT89C52 1702 RF chip can use the meter to a meter above etc.
CSS 的user-select属性，控制用户是否能够选中文本内容
读心悦
09-29 340
CSS的属性是一个在CSS3 UI规范中新增的功能，用于控制用户是否能够选中文本内容。这个属性在保护网站内容不被轻易复制、提高用户体验等方面有重要作用。以下是关于。
vue 项目打包更新后，界面未刷新时js与css资源加载404，监听资源文件404后自动重新加载页面。
xuelong的博客
09-27 268
希望可以监听到资源文件加载404时，刷新界面，解决打包后由于文件名的变化导致点击旧页面时 JS 和 CSS 文件出现 404 错误。使用方法下面方法来监听资源文件加载异常。
在线css像素px到rem的转换器
key12315的专栏
09-30 223
在线css像素px到rem的转换器
CSS元素显示样式
qyk666的博客
09-24 332
1.块元素 2.行内元素 3.行内块元素
CSS选择器的全面解析与实战应用
会思想的苇草i的博客
09-27 929
本文全面介绍了CSS选择器的种类与应用技巧，从基本的选择器如类型、类和ID选择器，到复合选择器如后代、相邻及通用兄弟选择器等，再到伪类和伪元素的选择器使用方法。通过详细的示例和最佳实践，帮助读者理解和掌握如何精确地定位页面元素，从而更高效地管理和优化CSS样式表，实现复杂的设计布局需求。
React【vite使用模块化css】
qq_32019935的博客
09-27 436
一般编写组件样式的时候我们都需要做对样式的模块化，以防止组件样式间的样式污染。在vue中有hash限制选择器在react中有样式模块化。
CSS——边框线条动画效果
懒羊羊大王的博客
09-28 1057
本文使用三种方法实现边框线条的动态效果，步骤详细，有视频演示。
css的背景background属性
Citrus的博客
09-28 1023
background 是一个复合属性，它允许你一次性设置多个与背景相关的样式。background属性还可以设置不同的子属性。
CSS 中 object-fit 的 cover 和 contain
最新发布
weixin_64684095的博客
09-30 245
object-fit 属性用于指定可替换元素（如`<img>`、`<video>`等）如何适应其容器。
CSS文本格式化
2401_82561004的博客
09-26 1236
需要特别注意的是，如果元素中的文本不足一行时，是无法实现两端对齐的（默认会以左对齐的效果显示）。属性用来控制文本中英文字母的大小写，通过该属性您可以在不修改原文的基础上，将文本中的英文统一更改为小写字母、大写字母或者首字母大写的形式。当然了，使用 text-decoration 属性也可以在需要的地方为元素中的文本添加一些装饰，达到突出显示的效果。text-decoration 属性用于设置或删除文本的装饰，最常用的做法就是使用 text-decoration 属性来删除。
CSS点击事件穿透
weixin_74261199的博客
09-27 263
假设盒子中有一个按钮，要实现。
如何在CSS中添加自定义属性
z16638522031的博客
09-26 395
在CSS中，你可以使用自定义属性（也称为CSS变量）来定义可以在整个文档中重用的值。这些自定义属性以两个破折号（--）开头，并可以在任何CSS声明块中定义。在CSS的根选择器（:root）或任何其他的CSS选择器内部定义自定义属性。这些属性通常被定义在:root选择器内部，这样它们就可以在整个文档中被访问。你还可以在JavaScript中读取和修改自定义属性。注意，当你使用JavaScript修改自定义属性时，这些变化将立即反映到任何使用了这些属性的CSS规则上，因为CSS变量是动态的。
HTML基础用法介绍一
xiao_yi666的博客
09-27 847
HTML5基础用法介绍，帮助小白快速了解基础操作，实现HTML5熟练掌握指日可待，快来看看吧！！！
在线css像素Px到百分比(%)换算器
key12315的专栏
09-30 102
在线css像素Px到百分比(%)换算器
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值