css3灯塔3d灯光特效

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: calc(var(--width)*0.4);height: calc(var(--height)*0.12);background-color: yellow;opacity: 0.5;margin: 0 auto;
}
#lighthouse #towerbody{width: calc(var(--width)*0.4);border-bottom: calc(var(--height)*0.5) solid skyblue;border-left: calc(var(--width)*0.15)  solid transparent;border-right: calc(var(--width)*0.15)  solid transparent;margin: 0 auto;
}
#lighthouse #towerlight{height: calc(var(--height)*0.12);border-bottom: calc(var(--height)*0.1) solid transparent;border-left: calc(var(--width)*1.5)  solid yellow;border-top: calc(var(--height)*0.1)  solid transparent;position: relative;top: calc(var(--height)*-0.77);left: calc(var(--height)*-0.6);animation: light-change 3s linear alternate infinite;transform-origin:100%;transform-style: preserve-3d;
}

效果如下：

2）css动画特效

#lighthouse #towerlight{height: calc(var(--height)*0.12);border-bottom: calc(var(--height)*0.1) solid transparent;border-left: calc(var(--width)*1.5)  solid yellow;border-top: calc(var(--height)*0.1)  solid transparent;position: relative;top: calc(var(--height)*-0.77);left: calc(var(--height)*-0.6);animation: light-change 3s linear alternate infinite;transform-origin:100%;transform-style: preserve-3d;
}
@keyframes light-change{0%{opacity: 0.1;transform: rotate3d(0,1,0,90deg);}50%{opacity: 0.3;transform: rotate3d(0,1,0,135deg);}100%{opacity: 0.1;transform: rotate3d(0,1,0,180deg);}
}

效果如下：

3）js点击改变灯光颜色

js：

var colors=new Array('yellow','red','white');var colorchoice=0;var lightcontent=document.getElementById('lightcontent');var towerlight=document.getElementById('towerlight');lightcontent.onclick=function(){colorchoice++;lightcontent.style.backgroundColor=colors[colorchoice%colors.length];towerlight.style.borderLeftColor=colors[colorchoice%colors.length];}

效果如下：

3.封装为自定义标签

1）引用方式（标签语法）

<light-tower width="150px" height="250px" id="lighttower" color="yellow,red,orange,purple"></light-tower>
<!--
width:灯塔宽度 height:灯塔高度 如果这两个属性为空，则灯塔宽高为0
color:灯塔灯光颜色集，可以有1-多个值，用“,”间隔开，第一个值为默认灯光颜色
color属性未设置时，默认颜色集为"yellow,red,white"
-->

2）实现

引入js文件方式：
1.直接引入博主的（定期更新完善）

<script type="text/javascript" src="http://121.196.148.73/js/lighttower.js"></script>

2.自己创建本地js文件，代码如下：

class LightHouse extends HTMLElement{constructor(){super();// 创建根元素，作用其实是将分离的css和html聚合起来var shadow = this.attachShadow({ mode: 'open' });//创建包裹元素var lighthouse=document.createElement('div');lighthouse.setAttribute('id','lighthouse');//创建子元素var top=document.createElement('div');top.setAttribute('id','top');var lighttop=document.createElement('div');lighttop.setAttribute('id','lighttop');var lightcontent=document.createElement('div');lightcontent.setAttribute('id','lightcontent');var lightbottom=document.createElement('div');lightbottom.setAttribute('id','lightbottom');var towerbody=document.createElement('div');towerbody.setAttribute('id','towerbody');var towerlight=document.createElement('div');towerlight.setAttribute('id','towerlight');//获取自定义标签的属性var width=this.getAttribute('width');var height=this.getAttribute('height');var color=this.getAttribute('color');if(color==null||color==="")color="yellow,red,white";//设置样式var style=document.createElement('style');style.textContent=`#lighthouse{width: `+width+`;height: `+height+`;}#lighthouse #top{width: 0px;height: 0px;border-bottom: calc(`+width+`*0.2) solid #c0c0c0;border-left: calc(`+width+`*0.2)  solid transparent;border-right: calc(`+width+`*0.2)  solid transparent;margin: 0 auto;}#lighthouse #lighttop,#lightbottom{width: calc(`+width+`*0.5);height: calc(`+height+`*0.05);background-color: palegoldenrod;margin: 0 auto;border-radius: 8%;}#lighthouse #lightcontent{width: calc(`+width+`*0.4);height: calc(`+height+`*0.12);background-color: yellow;opacity: 0.5;margin: 0 auto;}#lighthouse #towerbody{width: calc(`+width+`*0.4);border-bottom: calc(`+height+`*0.5) solid skyblue;border-left: calc(`+width+`*0.15)  solid transparent;border-right: calc(`+width+`*0.15)  solid transparent;margin: 0 auto;}#lighthouse #towerlight{height: calc(`+height+`*0.12);border-bottom: calc(`+height+`*0.1) solid transparent;border-left: calc(`+width+`*1.5)  solid yellow;border-top: calc(`+height+`*0.1)  solid transparent;position: relative;top: calc(`+height+`*-0.77);left: calc(`+height+`*-0.6);animation: light-change 3s linear alternate infinite;transform-origin:100%;transform-style: preserve-3d;}@keyframes light-change{0%{opacity: 0.1;transform: rotate3d(0,1,0,90deg);}50%{opacity: 0.3;transform: rotate3d(0,1,0,135deg);}100%{opacity: 0.1;transform: rotate3d(0,1,0,180deg);}}`;var colors=new Array();colors=color.split(",");var colorchoice=0;lightcontent.onclick=function(){colorchoice++;lightcontent.style.backgroundColor=colors[colorchoice%colors.length];towerlight.style.borderLeftColor=colors[colorchoice%colors.length];}shadow.appendChild(lighthouse);shadow.appendChild(style);lighthouse.appendChild(top);lighthouse.appendChild(lighttop);lighthouse.appendChild(lightcontent);lighthouse.appendChild(lightbottom);lighthouse.appendChild(towerbody);lighthouse.appendChild(towerlight);}
}
customElements.define('light-tower', LightHouse);

END

创作不易，点个赞再走吧~