css3灯塔3d灯光特效

最新推荐文章于 2024-10-19 10:30:00 发布

起风*

最新推荐文章于 2024-10-19 10:30:00 发布

阅读量997

点赞数 2

分类专栏： web学习文章标签： css html javascript web css3

本文链接：https://blog.youkuaiyun.com/weixin_43977664/article/details/118398142

版权

本文介绍如何使用CSS3创建一个灯塔3D灯光特效，包括设计思路、编码过程，以及如何将其封装为自定义标签。通过HTML布局、CSS动画实现灯光效果，并利用JavaScript实现点击改变灯光颜色的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3灯塔3d灯光特效

灯塔象征守护神和阳光，寓意希望，坚定而执着，始终如一不离不弃。灯塔，为一切夜里航行的人，用火光把道路照明，无私奉献。灯塔为迷茫的船只指引航行的方向，勇于承担，责任重大。

1.设计思路

利用CSS3画出灯塔的外观
画出灯塔射出的灯光并完成动画
将灯塔封装为标签

2.编码

1）html灯塔布局

html:

<div id="lighthouse">
	<div id="top"></div>
	<div id="lighttop"></div>
	<div id="lightcontent"></div>
	<div id="lightbottom"></div>
	<div id="towerbody"></div>
	<div id="towerlight"></div>
</div>

css:

:root{
   
    --width:150px;
    --height:250px;
}
#lighthouse{
   
    width: var(--width);
    height: var(--height);
    position: absolute;
    right: 0;
    bottom: 0;
}
#lighthouse #top{
   
    width: 0px;
    height: 0px;
    border-bottom: calc(var(--width)*0.2) solid #c0c0c0;
    border-left: calc(var(--width)*0.2)  solid transparent;
    border-right: calc(var(--width)*0.2)  solid transparent;
    margin: 0 auto;
}
#lighthouse #lighttop,#lightbottom{
   
    width: calc(var(--width)*0.5);
    height: calc(var(--height)*0.05);
    background-color: palegoldenrod;
    margin: 0 auto;
    border-radius: 8%;
}
#lighthouse #lightcontent{
   
    width: