网站首页 > 技术文章 正文
今天使用纯 CSS 实现一个可调节亮度的吊灯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="lw-main">
<div class="lr"></div>
<div class="li">
<div class="lm tw">
<div class="lm tlw"></div>
<div class="lm trw right-wrapper"></div>
</div>
<div class="lm lc-left"></div>
<div class="lm lc-right"></div>
<div class="lm lb"></div>
<div class="lamp-blub"></div>
</div>
<div class="lls"></div>
</div>
<form oninput="body.setAttribute('data-light', slider.value)" class="lli">
<div class="icon-sun">
<i class="fa fa-sun-o" aria-hidden="true"></i>
</div>
<input type="range" id="slider" value="0" min="0" max="10" />
</form>
</body>
<style>
body {
background-color: #000000;
overflow: hidden;
width: 100vw;
height: 100vh;
box-sizing: border-box;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.li {
position: relative;
width: 140px;
height: 100px;
z-index: 2;
}
.lm {
height: 100px;
width: 60%;
position: absolute;
top: 0;
left: 0;
background-color: #fff;
transform: skewX(-5deg);
}
.lw-main {
position: relative;
width: 100%;
justify-content: center;
display: flex;
}
.lr {
width: 8px;
height: 1200px;
background: #fff;
bottom: 100%;
position: absolute;
margin: auto;
}
.lm.tw {
background: transparent;
position: absolute;
width: 130px;
height: 20px;
left: 6px;
top: -17px;
}
.lm.tlw {
width: 50%;
height: 20px;
left: 0;
top: 0;
transform: skewX(-5deg);
border-radius: 80% 0 0 0;
}
.lm.trw {
left: 0;
top: 0;
transform: skewX(-5deg);
border-radius: 80% 0 0 0;
width: 50%;
height: 20px;
}
.lm.right-wrapper {
transform: skewX(5deg);
left: auto;
right: 1px;
border-radius: 0 80% 0 0;
}
.lm.lc-right {
transform: skewX(5deg);
left: auto;
right: 0;
}
.lm.lb:before {
position: absolute;
left: 0;
top: 0;
background: #fff;
border-radius: 50%;
content: "";
width: 100%;
height: 100%;
opacity: 1;
}
.lm.lb {
position: absolute;
top: auto;
bottom: -18px;
left: -5px;
border-radius: 50%;
border-top: 3px solid #000;
border-bottom: 2px solid #000;
background: linear-gradient(#fffffa, #fdffb2);
height: 30px;
width: 150px;
}
.lamp-blub {
border-radius: 5% 3% 38% 40%;
background-color: #fdffb2;
-webkit-filter: blur(15px);
filter: blur(15px);
z-index: 2;
opacity: 0;
position: absolute;
width: 120px;
height: 80px;
top: 10px;
left: 10px;
transition: all 300ms;
}
.lls {
border-radius: 50% 50% 0 0;
-webkit-filter: blur(5px);
filter: blur(5px);
z-index: -1;
opacity: 0;
transition: all 300ms;
background: linear-gradient(#ffffed, #000 30%);
width: 80%;
height: 200vh;
position: absolute;
top: 150%;
left: auto;
}
input {
--_c: color-mix(in srgb, var(--c), #000 var(--p, 0%));
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
overflow: hidden;
--c: #00008b;
--g: 2px;
--l: 5px;
--s: 20px;
width: 100%;
appearance: none;
background: none;
height: var(--s);
}
.lli {
width: 200px;
padding: 15px;
border-radius: 4px;
background: #fff;
display: flex;
align-items: center;
gap: 10px;
box-shadow: 1px 1px 25px rgb(0 0 0 / 10%);
}
.lli .icon-sun i {
font-size: 20px;
}
input[type="range" i]::-webkit-slider-thumb {
clip-path: polygon(
0 calc(50% + var(--l) / 2),
-100vw calc(50% + var(--l) / 2),
-100vw calc(50% - var(--l) / 2),
0 calc(50% - var(--l) / 2),
0 0,
100% 0,
100% calc(50% - var(--l) / 2),
100vw calc(50% - var(--l) / 2),
100vw calc(50% + var(--l) / 2),
100% calc(50% + var(--l) / 2),
100% 100%,
0 100%
);
height: var(--s);
aspect-ratio: 1;
border-radius: 50%;
box-shadow: 0 0 0 var(--_b, var(--l)) inset var(--_c);
border-image: linear-gradient(90deg, var(--_c) 50%, #ababab 0) 1/0 100vw/0
calc(100vw + var(--g));
-webkit-appearance: none;
appearance: none;
transition: 0.3s;
}
input:focus-visible,
input:hover {
--p: 25%;
}
input:active,
input:focus-visible {
--_b: var(--s);
}
input[type="range"]::-moz-range-thumb {
height: var(--s);
width: var(--s);
background: none;
clip-path: polygon(
0 calc(50% + var(--l) / 2),
-100vw calc(50% + var(--l) / 2),
-100vw calc(50% - var(--l) / 2),
0 calc(50% - var(--l) / 2),
0 0,
100% 0,
100% calc(50% - var(--l) / 2),
100vw calc(50% - var(--l) / 2),
100vw calc(50% + var(--l) / 2),
100% calc(50% + var(--l) / 2),
100% 100%,
0 100%
);
-moz-appearance: none;
appearance: none;
transition: 0.3s;
border-radius: 50%;
box-shadow: 0 0 0 var(--_b, var(--l)) inset var(--_c);
border-image: linear-gradient(90deg, var(--_c) 50%, #ababab 0) 1/0 100vw/0
calc(100vw + var(--g));
}
body[data-light^="1"] {
.lamp-blub,
.lls {
opacity: 0.1;
}
.lm.lb:before {
opacity: 0.9;
}
}
body[data-light^="2"] {
.lamp-blub,
.lls {
opacity: 0.2;
}
.lm.lb:before {
opacity: 0.8;
}
}
body[data-light^="3"] {
.lamp-blub,
.lls {
opacity: 0.3;
}
.lm.lb:before {
opacity: 0.7;
}
}
body[data-light^="4"] {
.lamp-blub,
.lls {
opacity: 0.4;
}
.lm.lb:before {
opacity: 0.6;
}
}
body[data-light^="5"] {
.lamp-blub,
.lls {
opacity: 0.5;
}
.lm.lb:before {
opacity: 0.5;
}
}
body[data-light^="6"] {
.lamp-blub,
.lls {
opacity: 0.6;
}
.lm.lb:before {
opacity: 0.4;
}
}
body[data-light^="9"] {
.lamp-blub,
.lls {
opacity: 0.9;
}
.lm.lb:before {
opacity: 0.1;
}
}
body[data-light="10"] {
.lamp-blub,
.lls {
opacity: 1;
}
.lm.lb:before {
opacity: 0;
}
}
body[data-light^="7"] {
.lamp-blub,
.lls {
opacity: 0.7;
}
.lm.lb:before {
opacity: 0.3;
}
}
body[data-light^="8"] {
.lamp-blub,
.lls {
opacity: 0.8;
}
.lm.lb:before {
opacity: 0.2;
}
}
@supports not (color: color-mix(in srgb, red, red)) {
input {
--_c: var(--c);
}
}
</style>
</html>
结语
感谢您的观看阅读，如果对你有帮助的话，请点点关注呗~
- 上一篇： CSS3快速入门:四、盒子模型
- 下一篇： CSS盒模型详解
猜你喜欢
- 2024-11-24 六种设计难题的CSS实用技巧
- 2024-11-24 前端入门教程:CSS标准盒模型和怪异盒模型区别
- 2024-11-24 WEB前端-CSS盒子
- 2024-11-24 手把手教你css 中多种边框的实现小窍门【实践】
- 2024-11-24 纯CSS实现轮播图
- 2024-11-24 「干货」移动端Web页面适配
- 2024-11-24 《Web前端技术H5+CSS3》笔记--第六章 盒子模型「云图智联」
- 2024-11-24 深入浅出超好用的 CSS 阴影技巧
- 2024-11-24 掌握Flex布局的这几个常用属性，搞定弹性布局不在话下
- 2024-11-24 用 CSS Grid 布局制作一个响应式柱状图
- 标签列表
-
- content-disposition (47)
- nth-child (56)
- math.pow (44)
- 原型和原型链 (63)
- canvas mdn (36)
- css @media (49)
- promise mdn (39)
- readasdataurl (52)
- if-modified-since (49)
- css ::after (50)
- border-image-slice (40)
- flex mdn (37)
- .join (41)
- function.apply (60)
- input type number (64)
- weakmap (62)
- js arguments (45)
- js delete方法 (61)
- blob type (44)
- math.max.apply (51)
- js (44)
- firefox 3 (47)
- cssbox-sizing (52)
- js删除 (49)
- js for continue (56)
- 最新留言
-