<template>
<view class="content">
<view class="a">
<text></text>
<text></text>
<text></text>
<text></text>
发光按钮
</view>
</view>
</template>
<script>
</script>
<style>
body {
background-color: black; /* 设置页面背景色为黑色 */
}
.content {
display: flex;
flex-direction: column; /* 将元素垂直排列 */
align-items: center; /* 水平居中对齐 */
justify-content: center; /* 垂直居中对齐 */
margin-top: 300px; /* 顶部外边距为300像素 */
}
.a {
position: relative; /* 设置容器为相对定位 */
color: #03e9f4; /* 设置文本颜色为亮蓝色 */
text-decoration: none; /* 取消文本的下划线 */
transition: 0.5s; /* 设置过渡效果的时间为0.5秒 */
letter-spacing: 4px; /* 设置字符间距为4像素 */
overflow: hidden; /* 隐藏溢出内容 */
padding: 25px 50px; /* 设置内边距 */
}
.a:hover {
background: #03e9f4; /* 鼠标悬停时,设置背景色为亮蓝色 */
color: #050801; /* 鼠标悬停时,设置文本颜色为深蓝色 */
box-shadow: 0 0 5px #03e9f4, /* 添加阴影效果 */
0 0 25px #03e9f4,
0 0 50px #03e9f4,
0 0 200px #03e9f4;
-webkit-box-reflect: below 1px linear-gradient(transparent, #0005); /* 添加反射效果 */
}
.a:nth-child(1) {
filter: hue-rotate(270deg); /* 对第一个元素应用色相旋转 */
}
.a:nth-child(2) {
filter: hue-rotate(110deg); /* 对第二个元素应用色相旋转 */
}
.a text {
position: absolute; /* 设置绝对定位 */
display: block; /* 显示为块级元素 */
}
.a text:nth-child(1) {
top: 0; /* 设置顶部位置为0 */
left: 0; /* 设置左侧位置为0 */
width: 100%; /* 宽度为100% */
height: 2px; /* 高度为2像素 */
background: linear-gradient(90deg,transparent,#03e9f4); /* 应用线性渐变背景色 */
animation: animate1 1s linear infinite; /* 应用动画效果 */
}
@keyframes animate1 {
0% {
left: -100%; /* 动画开始时,设置左侧位置为-100% */
}
50%, 100% {
left: 100%; /* 动画中和动画结束时,设置左侧位置为100% */
}
}
.a text:nth-child(2) {
top: -100%; /* 设置顶部位置为-100% */
right: 0; /* 设置右侧位置为0 */
width: 2px; /* 宽度为2像素 */
height: 100%; /* 高度为100% */
background: linear-gradient(180deg,transparent,#03e9f4); /* 应用线性渐变背景色 */
animation: animate2 1s linear infinite; /* 应用动画效果 */
animation-delay: 0.25s; /* 延迟0.25秒执行动画 */
}
@keyframes animate2 {
0% {
top: -100%; /* 动画开始时,设置顶部位置为-100% */
}
50%, 100% {
top: 100%; /* 动画中和动画结束时,设置顶部位置为100% */
}
}
.a text:nth-child(3) {
bottom: 0; /* 设置底部位置为0 */
right: 0; /* 设置右侧位置为0 */
width: 100%; /* 宽度为100% */
height: 2px; /* 高度为2像素 */
background: linear-gradient(270deg,transparent,#03e9f4); /* 应用线性渐变背景色 */
animation: animate3 1s linear infinite; /* 应用动画效果 */
animation-delay: 0.50s; /* 延迟0.5秒执行动画 */
}
@keyframes animate3 {
0% {
right: -100%; /* 动画开始时,设置右侧位置为-100% */
}
50%, 100% {
right: 100%; /* 动画中和动画结束时,设置右侧位置为100% */
}
}
.a text:nth-child(4) {
bottom: -100%; /* 设置底部位置为-100% */
left: 0; /* 设置左侧位置为0 */
width: 2px; /* 宽度为2像素 */
height: 100%; /* 高度为100% */
background: linear-gradient(360deg,transparent,#03e9f4); /* 应用线性渐变背景色 */
animation: animate4 1s linear infinite; /* 应用动画效果 */
animation-delay: 0.75s; /* 延迟0.75秒执行动画 */
}
@keyframes animate4 {
0% {
bottom: -100%; /* 动画开始时,设置底部位置为-100% */
}
50%, 100% {
bottom: 100%; /* 动画中和动画结束时,设置底部位置为100% */
}
}
</style>
12-17
1499

08-22
333

08-07
681

04-06
568

03-17
363
