css霓虹灯效果

admin管理员组

文章数量:1794759

css霓虹灯效果

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;

菜鸟教程相关链接: 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;

菜鸟教程相关链接: 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;

菜鸟教程相关链接: www.runoob/cssref/pr-text-text-decoration.html

属性值： 4.text-transform 属性

菜鸟教程相关链接: www.runoob/cssref/pr-text-text-transform.html

属性值：

本文标签： 霓虹灯效果css