Sun-Panel-css 源码

与末大佬博客

鼠标悬停动画+鼠标新光标样式+卡片背景线条样式+网页计时器 不需要的自行删除

服务器主机shell输入以下命令：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
touch /mnt/mydisk/home/sun-panel/config/custom/index.css && cat > /mnt/mydisk/home/sun-panel/config/custom/index.css <<'EOF'
/*鼠标悬停动画 */

/* 当鼠标悬停在图标信息框上时触发动画 */
/* 详细图标摇晃动画 */
.icon-info-box .rounded-2xl:hover {
  background: rgba(42, 42, 42, 0.7) !important;/* 背景颜色变成深灰色 */
  -webkit-animation: info-shake-bounce .5s alternate !important;
  -moz-animation: info-shake-bounce .5s alternate !important;
  -o-animation: info-shake-bounce .5s alternate !important;
  animation: info-shake-bounce .5s alternate !important;
}

/* 小图标摇晃动画 */
.icon-small-box .rounded-2xl:hover {
  background: rgba(42, 42, 42, 0.7) !important;/* 背景颜色变成深灰色 */
  -webkit-animation: small-shake-bounce .5s alternate !important;
  -moz-animation: small-shake-bounce .5s alternate !important;
  -o-animation: small-shake-bounce .5s alternate !important;
  animation: small-shake-bounce .5s alternate !important;
}

/* 定义摇详细图标晃弹跳动画的关键帧 */
@keyframes info-shake-bounce {

  0%,
  100% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(10deg);
  }

  50% {
    transform: rotate(-10deg);
  }

  75% {
    transform: rotate(2.5deg);
  }

  85% {
    transform: rotate(-2.5deg);
  }
}

/* 定义摇小图标晃弹跳动画的关键帧 */
@keyframes small-shake-bounce {

  0%,
  100% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(15deg);
  }

  50% {
    transform: rotate(-15deg);
  }

  75% {
    transform: rotate(5deg);
  }

  85% {
    transform: rotate(5deg);
  }
}

/* 自定义鼠标新光标样式 */
body {
  cursor: url(https://cdn.custom-cursor.com/db/4828/32/arrow2747.png), default !important;
}

/* 自定义鼠标悬浮光标 */
.cursor-pointer {
  cursor: url(https://cdn.custom-cursor.com/db/4827/32/arrow2747.png), auto !important;
}


/* 卡片背景线条样式 BY 香水 [二群大佬提供] */

/* 伪元素创建背景线条样式 */
.w-full .font-semibold:before {
  position: absolute;  /* 设置为绝对定位 */
  width: 93px;  /* 宽度为93像素 */
  display: block;  /* 设置为块级元素 */
  height: 75px;  /* 高度为75像素 */
  content: "";  /* 伪元素内容为空 */
  border-radius: 50%;  /* 边框半径为50%，形成圆形 */
  z-index: -1;  /* 设置层级为-1，将其放在内容之后 */
  right: -27px;  /* 距离右边-27像素的位置 */
  top: -35px;  /* 距离顶部-35像素的位置 */
  background: #ffffff3b;  /* 背景颜色为淡白色带透明度的3b */
  box-shadow: -8px 21px 0 #ffffff1a;  /* 设置阴影效果，水平偏移-8px，垂直偏移21px，颜色为淡白色带透明度的1a */
}

/* 伪元素创建另一种背景线条样式 */
.w-full .font-semibold:after {
  position: absolute;  /* 设置为绝对定位 */
  width: 40px;  /* 宽度为40像素 */
  display: block;  /* 设置为块级元素 */
  height: 40px;  /* 高度为40像素 */
  border: 4px solid #ffffff3b;  /* 边框为4像素的实线，颜色为淡白色带透明度的3b */
  content: "";  /* 伪元素内容为空 */
  border-radius: 50%;  /* 边框半径为50%，形成圆形 */
  top: -19px;  /* 距离顶部-19像素的位置 */
  right: 48px;  /* 距离右边48像素的位置 */
  z-index: -1;  /* 设置层级为-1，将其放在内容之后 */
}

/* 设置图标信息框的圆角样式 */
.icon-info-box .rounded-2xl {
  position: relative;  /* 设置为相对定位 */
  border-radius: 15px;  /* 设置边框半径为15像素，形成圆角 */
  overflow: hidden;  /* 超出部分隐藏 */
  -webkit-backdrop-filter: blur(10px);  /* 使用Webkit前缀的背景滤镜，模糊程度为10像素 */
  backdrop-filter: blur(10px);  /* 背景滤镜，模糊程度为10像素 */
}

function siteTime() {
  window.setTimeout(siteTime, 1000);

  var seconds = 1000;
  var minutes = seconds * 60;
  var hours = minutes * 60;
  var days = hours * 24;
  var years = days * 365;

  var targetDate = new Date(2025, 01, 28); // 注意月份是从0开始的，所以11表示12月
  var today = new Date();
  var diff = today - targetDate;

  // 计算已运行的年数
  var totalYears = Math.floor(diff / years);

  // 计算剩余时间
  var remainingTime = diff % years;

  var diffDays = Math.floor(remainingTime / days);
  remainingTime %= days;

  var diffHours = Math.floor(remainingTime / hours);
  remainingTime %= hours;

  var diffMinutes = Math.floor(remainingTime / minutes);
  remainingTime %= minutes;

  var diffSeconds = Math.floor(remainingTime / seconds);

  document.getElementById("sitetime").innerHTML = "网页已运营 " + totalYears + " 年 " + diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
}

siteTime();
EOF

浏览器清空缓存，刷新后见效果