css开关控制手电筒

CSS 开关控制手电筒是一个很好的CSS练习项目，您可以使用它来加深您对于CSS的认识。

下面这段代码演示了一个非常简单的手电筒。您可以通过点击按钮控制手电筒的打开和关闭功能。

html {
        background-color: #444;
}
.flashlight {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 400px;
        height: 400px;
        border-radius: 50%;
        border: 20px solid #fff;
        box-shadow: 0px 0px 100px 100px rgba(0, 0, 0, 0.5);
        transition: box-shadow 0.3s ease;
}
.flashlight.on {
        box-shadow: 0px 0px 100px 500px rgba(0, 0, 0, 0.5);
}
.button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 5px solid #fff;
        background-color: #444;
        cursor: pointer;
        transition: background-color 0.3s ease;
}
.button:hover {
        background-color: #fff;
}
    

这段代码包含了一个手电筒（与一个默认的阴影），以及一个控制手电筒的按钮。关键是，手电筒的阴影通过CSS来实现，它能够随着按钮的状态变化而改变。您可以体验一下通过更改按钮和手电筒的CSS类名所实现的效果。

CSS 开关控制手电筒是一个有趣而令人愉悦的练习项目。它展示了CSS的强大功能，使您能够在不使用JavaScript的情况下控制网页元素的状态。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！