这是我参与更文挑战的第26天，活动详情查看： 更文挑战
前言
虽然今天周末，但是更文大业又被我拖到了深夜，熬夜更文，嗐~ 怎么说呢？和拖延症一样难改的就是银行卡余额。
今天看到有个PS的教程教做路灯效果，我就想做个css版的路灯效果来看一下，话不多说，一起来跟着文章做一遍吧~
过程
首先要做个路灯，自然要分析路灯的结构，随手画了个草图（真——潦草图）：
简单来说，路灯要有顶部的盖子、四根支架、底座、杆子、发光的灯芯。也就是五个部分，
造型的话自己调整即可，首先把路灯的结构搭起来看一下，颜色的话我选了小清新的蓝绿色，布局主要是用定位搞定的，希望灯架有些立体感，所以加了linear-gradient调整，支架的旋转用到了rotate属性，其它没什么高深的代码。直接贴出代码如下：
<style>
.box{
width: 800px;
height: 800px;
margin: 200px auto;
position: relative;
background-color: #000;
}
.box div{
position: absolute;
}
.top-box {
width: 140px;
height: 60px;
top: 120px;
left: 270px;
background: linear-gradient(120deg, #b0ffc4 0%, #7bfda2 40%, #93fdbc 60%, #a0ffc8 67%, #95ffe4 100%);
border-radius: 20% 20% 100% 100% / 50% 50% 10% 10%;
}
.base-box{
width: 70px;
height: 10px;
top: 290px;
left: 307px;
background: linear-gradient(90deg, #b0ffc4 0%, #7bfda2 30%, #93fdbc 50%, #95ffe4 100%);
border-radius: 50% 50% 10% 10% / 20% 20% 100% 100%;
box-shadow: 0 5px 5px black;
}
.column{
top: 178px;
width: 3px;
height: 115px;
background: rgb(148, 255, 196);
}
.col1{
left: 292px;
transform: rotate(-15deg);
}
.col2{
left: 312px;
transform: rotate(-10deg);
}
.col3{
left: 368px;
transform: rotate(10deg);
}
.col4{
left: 388px;
transform: rotate(15deg);
}
.pole{
width: 10px;
height: 360px;
top: 300px;
left: 337px;
background: linear-gradient(90deg, #b0ffc4 0%, #7bfda2 30%, #93fdbc 50%, #95ffe4 100%);
}
</style>
<div class="box">
<!-- 顶部盖子 -->
<div class="top-box"></div>
<!-- 4根支架 -->
<div class="column col1"></div>
<div class="column col2"></div>
<div class="column col3"></div>
<div class="column col4"></div>
<!-- 灯芯 -->
<div class="light"></div>
<!-- 底座 -->
<div class="base-box"></div>
<!-- 杆子 -->
<div class="pole"></div>
</div>
实现效果如下图：
是不是和草图有点像了？下一步只要把灯芯加进去即可。
要做个合适的灯芯，必须考虑灯的结构，灯的中间是最亮的，中间应该有个发光的原点偏白色，然后周围逐渐扩散，同时在灯的背后也应该有一根支架的影子才更加真实。所以考虑这些之后，我决定把灯芯分为左右两部分，中间保持一定的间距可以很好的模拟中间一根支架的阴影，同时最中间加一个白色的圆形进行不断的收缩动画，即可模拟出灯光效果。
灯光的效果没有使用box-shadow模拟，而是用到了filter属性，主要是因为filter属性可以更好的实现模糊甚至饱和度的调整。一番调整后，代码如下：
<style>
.box{
width: 800px;
height: 800px;
margin: 200px auto;
position: relative;
background-color: #000;
}
.box div{
position: absolute;
}
.top-box {
width: 140px;
height: 60px;
top: 120px;
left: 270px;
background: linear-gradient(120deg, #b0ffc4 0%, #7bfda2 40%, #93fdbc 60%, #a0ffc8 67%, #95ffe4 100%);
border-radius: 20% 20% 100% 100% / 50% 50% 10% 10%;
}
.base-box{
width: 70px;
height: 10px;
top: 290px;
left: 307px;
background: linear-gradient(90deg, #b0ffc4 0%, #7bfda2 30%, #93fdbc 50%, #95ffe4 100%);
border-radius: 50% 50% 10% 10% / 20% 20% 100% 100%;
box-shadow: 0 5px 5px black;
}
.column{
top: 178px;
width: 3px;
height: 115px;
background: rgb(148, 255, 196);
}
.col1{
left: 292px;
transform: rotate(-15deg);
}
.col2{
left: 312px;
transform: rotate(-10deg);
}
.col3{
left: 368px;
transform: rotate(10deg);
}
.col4{
left: 388px;
transform: rotate(15deg);
}
.pole{
width: 10px;
height: 360px;
top: 300px;
left: 337px;
background: linear-gradient(90deg, #b0ffc4 0%, #7bfda2 30%, #93fdbc 50%, #95ffe4 100%);
}
.light{
top: 175px;
left: 246px;
width: 190px;
height: 110px;
}
.light span{
float: left;
width: 95px;
height: 120px;
}
.light .wick{
width: 30px;
height: 30px;
position: absolute;
top: 45px;
left: 78px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
animation: glow 5s linear infinite;
}
.light .left{
bottom: 598px;
left: 155px;
background: #f1ff00;
background: linear-gradient(255deg, #f1ff00 0%, #f5ff00 50%, rgba(168, 168, 168, 0) 50%, rgba(94, 94, 94, 0) 100%);
filter: blur(2px) drop-shadow(0 0 15px #ffff00);
animation: light-glow 5s linear infinite alternate;
}
.light .right{
bottom: 598px;
left: 250px;
background: #f1ff00;
background: linear-gradient(105deg, #f1ff00 0%, #f5ff00 50%, rgba(168, 168, 168, 0) 50%, rgba(94, 94, 94, 0) 100%);
filter: blur(2px) drop-shadow(0 0 15px ffff00);
animation: light-glow 5s linear infinite alternate;
}
@keyframes light-glow {
0% {
filter: blur(2px) drop-shadow(0 0 15px #ffff00);
}
100% {
filter: blur(5px) drop-shadow(0 0 30px #ffff00);
}
}
@keyframes glow {
0% {
transform: scale(0.8);
}
100% {
transform: scale(1);
}
}
</style>
<div class="box">
<!-- 灯芯 -->
<div class="light">
<span class="left"></span>
<span class="right"></span>
<span class="wick"></span>
</div>
<!-- 顶部盖子 -->
<div class="top-box"></div>
<!-- 4根支架 -->
<div class="column col1"></div>
<div class="column col2"></div>
<div class="column col3"></div>
<div class="column col4"></div>
<!-- 底座 -->
<div class="base-box"></div>
<!-- 杆子 -->
<div class="pole"></div>
</div>
实现效果如下图：
之所以调整了灯芯元素的位置为最上面，是因为需要后面元素会覆盖它，也就是说在绝对定位中，后面的元素会叠在前面元素的上面，调整元素顺序可以避免出现灯芯覆盖路灯主体的情况出现。
当然啦，灯杆的立体感可以细调，中间的白色灯芯部分还可以再优化，如果你有兴趣可以继续研究一下哦~
后记
希望大冰块今天分享的内容能对你有所帮助，做出路灯效果加上写文差不多要两个小时了，看起来简单但是调整起来还是很麻烦的，就像平时写页面时，css样式总是占据好多时间，不过完成之后还是很有成就感的。有点小想法立马就动手去实现它，无论简单还是复杂，这本身就是一件令人高兴的事情。
今天是我坚持日更的第二十六天，每天输出一点点，进步一点点。日拱一卒，功不唐捐。大家一起加油呀~
如果本文对你有帮助，别再是悄悄收藏啦！比如点个赞呀，关注大冰块呀，一起和大冰块学习更多好玩的技术博客吧~
更文挑战的文章目录如下：
- 2021.06.01 《多图预警！详细谈谈Flex布局的容器元素和项目元素的属性~》
- 2021.06.02 《如何把css渐变背景玩出花样来》
- 2021.06.03 《如何使用SVG制作沿任意路径排布的文字效果》
- 2021.06.04 《3大类15小类前端代码规范，让团队代码统一规范起来！》
- 2021.06.05 《团队管理之git提交规范：大家竟然都不会写commit记录？｜ 周末学习》
- 2021.06.06 《如何控制css鼠标样式以及扩大鼠标点击区域 ｜ 周末学习》
- 2021.06.07 《纯css实现：仿掘金账户密码登录时，小熊猫捂眼动作切换的小彩蛋》
- 2021.06.08 《从11个方面详细谈谈原型和原型链》
- 2021.06.09 《深入谈谈JavaScript的作用域及作用域链》
- 2021.06.10 《JavaScript中的闭包究竟是什么》
- 2021.06.11 《纯css实现：炫酷的视频文本蒙版效果》
- 2021.06.12 《申请一个免费的毒鸡汤api，并且用原生JS实现竖行文本的打字机效果》
- 2021.06.13 《纯css实现：多行文本框内的斑马条纹效果》
- 2021.06.14 《原生JS实现触摸滑动监听事件》
- 2021.06.15 《原生JS实现鼠标滚轮触发页面横向滚动》
- 2021.06.16 《原生JS实现跳转或刷新页面时，浏览器提示当前页面未保存》
- 2021.06.17 《原生JS的三大基础弹框探究》
- 2021.06.18 《纯css实现：固定在页面底部的按钮》
- 2021.06.19 《纯css实现：单行文本的打字机动画效果》
- 2021.06.20 《纯css实现：如何做个完美的平行四边形》
- 2021.06.21 《谈谈基于JS实现阻止别人调试通过控制台调试网站的问题》
- 2021.06.22 《纯css实现：文字被颜色逐渐填满的特效》
- 2021.06.23 《h5实现一个刮刮卡的动画效果》
- 2021.06.24 《纯css实现：文字可换行的下划线、波浪线等效果》
- 2021.06.25 《实现多行文字被颜色逐渐填满的特效》
