Elaina`s Blog
0%

发表于
本文字数： 4.2k 阅读时长 ≈ 4 分钟

##演示效果
1:

2:

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <a class="colorful" href="#">Button</a><!--这是第一个特效-->
        </div>
        <div class="container">
            <a href="#" class="material">button
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </a><!--这是第二个特效-->
        </div>
    </div>
</body>
</html>

CSS(有待优化)

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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
body{
    margin: 0;
    padding: 0;
    background-color: #0c002b;
    width: 100%;
    height: 100%;
}
.wrapper{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: auto 0;
}
.container{
    width: 50%;
    height: 200px;
    /* border: 1px dotted white; */
    position: relative;
    top: 100px;

    margin: 15px auto;
    border-radius: 100px;
    /* box-shadow: 0 0 10px #008c8c; */
}
.colorful{
    width: 200px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 24px;
    font-family: sans-serif;
    color: white;
    background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
    line-height: 60px;
    text-align: center;
    text-transform: uppercase;
    border-radius: 30px;
    text-decoration: none;
    background-size: 400%;
    z-index: 1;
}
.colorful:hover{
    opacity: 1;
    animation: animate 8s linear infinite;
}
.colorful:hover::before{
    opacity: 1;
    animation: animate 8s linear infinite;
  
}
.colorful::before{
    content: "";
    border-radius: 30px;
    opacity: 0;
    transition: .4s cubic-bezier(0.22, 0.61, 0.36, 1);
    position: absolute;
    top: -5px;
    bottom: -5px;
    right: -5px;
    left: -5px;
    z-index: -1;
    filter: blur(20px);
    background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
    background-size: 400%;
}
@keyframes animate{
    0%{
        background-position: 0;
    }
    100%{
        background-position: 400%;
    }
}

/* 特效2 */

.material{
    width: 200px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 24px;
    font-family: sans-serif;
    color: #1670f0;
    line-height: 60px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    overflow: hidden;
    padding: 2px;
}
.material::before{
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    bottom: 2px;
    width: 50%;
    background-color: rgba(255, 255, 255, 0.05);
}
.material span:nth-child(2n-1){
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
}
.material span:nth-child(2n){
    display: block;
    width: 2px;
    height: 100%;
    position: absolute;
    top: 0;
}
.material span:nth-child(1){
    top: 0;
    background: linear-gradient(to right,#000,#1670f0);
    animation: movetoright 2s linear infinite;
}
.material span:nth-child(2){
    right: 0;
    background: linear-gradient(to bottom,#000,#1670f0);
    animation: movetobottom 2s linear infinite;
    animation-delay: 1s;
}
.material span:nth-child(3){
    bottom: 0;
    background: linear-gradient(to left,#000,#1670f0);
    animation: movetoleft 2s linear 0s infinite;
}
span:nth-child(4){
    left: 0;
    background: linear-gradient(to top,#000,#1670f0);
    animation: movetotop 2s linear infinite;
    animation-delay: 1s;
}
@keyframes movetoright{
    0%{
        transform: translateX(-100%);
    }
    100%{
    
        transform: translateX(100%);
    }
}
@keyframes movetobottom{
    0%{
        transform: translateY(-100%);
    }
    100%{
        transform: translateY(100%);
    }
}
@keyframes movetoleft{
    0%{
        transform: translateX(100%);
    }
    100%{
    
        transform: translateX(-100%);
    }
}
@keyframes movetotop{
    0%{
        transform: translateY(100%);
    }
    100%{
        transform: translateY(-100%);
    }
}

发表于
本文字数： 2.8k 阅读时长 ≈ 3 分钟

我的 vscode 使用的插件有

  • Live Reload
  • Eva Theme(应用了主题 Eva dark)
  • CSS Formatter
  • open in browser
  • Auto Rename Tag
  • ……
    j

自定义代码片段：

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
{
	// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"njk if":{
		"prefix":"nji",
		"body": ["{% if ${1:variable} %}",
			"$0",
			"{% endif %"
		],
		"description":"njk if语句"
	},
	"njk if-else":{
		"prefix":"nji",
		"body": ["{% if ${1:variable} %}",
			"$0",
			"{% elif ${2:varibable}",
			"",
			"{% endif %}"
		],
		"description":"njk if-else语句"
	},
	"njk for":{
		"prefix":"njf",
		"body": ["{% for ${1:item} in ${2:items} %}",
			"    $0",
			"{% endfor %}"
		],
		"description":"njk for语句,如果items为空,可添加else语句执行"
	},
	"njk expression":{
		"prefix": "nje",
		"body": "{{ $0 }}",
		"description": "njk 表达式"
	},
	"njk extends":{
		"prefix": "nje",
		"body": "{% extends ${1:path} %}",
		"description": "nunjucks 继承模板"
	},
	"njk include":{
		"prefix": "nje",
		"body": "{% include ${1:path} %}",
		"description": "nunjucks 导入模板"
	},
	"njk block":{
		"prefix": "njb",
		"body": ["{% block ${1:name} %}",
			"$0",
			"{% endblock %}"
		],
		"description": "nunjucks block块"
	},
	"njk macro":{
		"prefix": "",
		"body": "{{ $0 }}",
		"description": "njk 宏,相当于定义一个函数"
	},
	"njk comment":{
		"prefix": "njc",
		"body": "{# $0 #}",
		"description": "nunjucks注释"
	}
}

这些自定义片段是用于 nunjucks 的

发表于
本文字数： 242 阅读时长 ≈ 1 分钟

“Everything” 是 Windows 上的一款搜索引擎，它能够基于文件名快速定文件和文件夹位置。

不像 Windows 内置搜索，”Everything” 默认显示电脑上每个文件和文件夹 (就如其名 “Everything”)。

您在搜索框输入的关键词将会筛选显示的文件和文件夹。

它的特点：

  • 轻量安装文件
  • 干净简洁的用户界面
  • 快速文件索引
  • 快速搜索
  • 最小资源使用
  • 便于文件分享
  • 实时更新

这个软件体积小功能使用，值得分享
在你找不到文件的时候，打开它便可一触即达

信息

发表于
本文字数： 40 阅读时长 ≈ 1 分钟

JAVA操作samba文件服务器

正好学了下samba的配置，便想了个另类使用办法

发表于
本文字数： 864 阅读时长 ≈ 1 分钟

lvm填坑

引用链接
https://www.cnblogs.com/kevingrace/p/5825963.html

在后续维护系统过程中，发现有些分区空间不够使用，而有的分区空间却有很多剩余空间。如果这些分区在装系统的时候使用了lvm（前提是这些分区要是lvm逻辑卷分区），那么就可以轻松进行扩容或缩容！不同文件系统类型所对应的创建、检查、调整命令不同，下面就针对xfs和ext2/3/4文件系统的lvm分区空间的扩容和缩容的操作做一记录：

特别注意的是：

| — | — |
| resize2fs命令 | 针对的是ext2、ext3、ext4文件系统 |
| xfs_growfs命令 | 针对的是xfs文件系统 |

1. ext2/ext3/ext4文件系统的调整命令是resize2fs（增大和减小都支持）

1
2
3
4
5
lvextend -L 120G /dev/mapper/centos-home     //增大至120G
lvextend -L +20G /dev/mapper/centos-home     //增加20G
lvreduce -L 50G /dev/mapper/centos-home      //减小至50G
lvreduce -L -8G /dev/mapper/centos-home      //减小8G
resize2fs /dev/mapper/centos-home            //执行调整

2. xfs文件系统的调整命令是xfs_growfs（只支持增大）

1
2
3
lvextend -L 120G /dev/mapper/centos-home    //增大至120G
lvextend -L +20G /dev/mapper/centos-home    //增加20G
xfs_growfs /dev/mapper/centos-home          //执行调整

就是说：xfs文件系统只支持增大分区空间的情况，不支持减小的情况（切记！！！！！）。

硬要减小的话，只能在减小后将逻辑分区重新通过mkfs.xfs命令重新格式化才能挂载上，这样的话这个逻辑分区上原来的数据就丢失了。如果有重要文件，那就歇菜喽～～～

发表于
本文字数： 237 阅读时长 ≈ 1 分钟

Linux 多用户管理

[TOC]

用户的增删改查

tip:查看用户信息可以用 id 用户名

image

用户管理命令表

命令 用处
useradd 添加用户
userdel 删除用户
usermod 修改用户信息

用户组管理命令表

命令 用处
groupadd 添加用户组

1. 增加用户 ueradd

用法: useradd [参数] 用户名
参数用法

一个用户只能指定一个基本组和多个扩展组

2. 删除用户 userdel

删除用户很好使用,不必多讲

image

组的管理

组的管理倒没什么好说的,仅仅以下内容

使用groupadd即可创建组
使用groupdel即可删除组

发表于
本文字数： 5 阅读时长 ≈ 1 分钟

Linux