css霓虹灯效果

编程知识更新时间:2023-04-06 08:02:01

css霓虹灯效果

看图说话：

HTML：

		<div id="app" v-cloak>
			<a href="#">Button</a>
			<a href="#">Button</a>
			<a href="#">Button</a>
		</div>

CSS：

			body{
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background: #000000;
				min-height: 100vh;
			}
			a{
				position: relative;
				padding: 10px 30px;
				margin: 45px 70px;
				color: #21ebff;
				text-decoration: none;
				font-size: 20px;
				text-transform: uppercase;
				transition: 0.5s;
				overflow: hidden;
				-webkit-box-reflect: below 1px linear-gradient(transparent,#0003);
			}
			a:hover{
				background: #21EBFF;
				color: #111111;
				box-sizing: 0 0 50px #21EBFF;
				filter: drop-shadow(0px 0px 20px #21EBFF);
				transition-delay: 0.5s;
			}
			
			a:nth-child(1){
				filter: hue-rotate(115deg);
			}
			a:nth-child(3){
				filter: hue-rotate(270deg);
			}
			a::before{
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 10px;
				height: 10px;
				border-top: 2px solid #21ebff;
				border-left: 2px solid #21ebff;
				transition: 0.5s;
				transition-delay: 0.5s;
			}
			a:hover::before{
				width: 97%;
				height: 94%;
				transition-delay: 0s;
			}
			a::after{
				content: '';
				position: absolute;
				bottom: 0;
				right: 0;
				width: 10px;
				height: 10px;
				border-bottom: 2px solid #21ebff;
				border-right: 2px solid #21ebff;
				transition: 0.5s;
				transition-delay: 0.5s;
			}
			a:hover::after{
				width: 97%;
				height: 94%;
				transition-delay: 0s;
			}

补充说明：

1.flex-direction 属性
flex-direction 属性规定灵活项目的方向。
注意：如果元素不是弹性盒对象的元素，则 flex-direction 属性不起作用。

css语法: flex-direction: row | row-reverse | column | column-reverse | initial | inherit;

菜鸟教程相关链接: https://www.runoob/cssref/css3-pr-flex-direction.html

flex-direction:row;

flex-direction:row-reverse;

flex-direction:column;

flex-direction:column-reverse;

2.align-items 属性
align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
提示：使用每个弹性对象元素的 align-self 属性可重写 align-items 属性。

css语法: align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;

菜鸟教程相关链接: https://www.runoob/cssref/css3-pr-align-items.html

属性值：

3.vh/vw
height:100vh;中的vh/vw
vh: 相对于视窗的高度, 视窗被均分为100单位的vh;
vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;

4.text-decoration 属性

		/*关键值*/
		text-decoration: none;                     /*没有文本装饰*/
		text-decoration: underline red;            /*红色下划线*/
		text-decoration: underline wavy red;       /*红色波浪形下划线*/
		
		/*全局值*/
		text-decoration: inherit;
		text-decoration: initial;
		text-decoration: unset;