抄代码

编程项目

HTML JavaScript CSS js

CSS特效

抄

css实现文字的图案填充效果

创建于 2024-03-21 18:43:06

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

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>CSS 文字图案填充</title>
<style>
.pattern-text {



font-size: 60px;
font-weight: bold;
color: transparent; /* 文字颜色设置为透明 */
background: url('your-pattern-image.png') no-repeat; /* 替换为你的图案图片 */
-webkit-background-clip: text;
background-clip: text;
display: inline-block;




}
</style>
</head>
<body>



<div class=“pattern-text”>这是图案填充的文字</div>



</body>
</html>
CSS

抄

css镂空字体

创建于 2024-03-21 18:35:52

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

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>CSS Hollow Text Example</title>
<style>
.hollow-text {



font-size: 60px;
font-weight: bold;
color: #333; /* Fallback color for browsers that don't support text-fill-color */
-webkit-text-fill-color: transparent; /* Override the text color */
background: -webkit-linear-gradient(#333, #333) ; /* Gradient for the text */
-webkit-background-clip: text; /* Clip the background to the text */
-webkit-text-stroke: 1px white; /* Stroke the text with a white color */




}
</style>
</head>
<body>
<div class=“hollow-text”>Hello World!</div>
</body>
</html>
CSS

抄

css以两种不同颜色显示文字

创建于 2024-03-21 18:34:04

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

<p class=“text”>你好，世界！再见，世界！</p>
.text {
  color: black; /* 默认颜色 */
}



.text:nth-of-type(1) {
  color: red; /* 第一个元素的颜色 */
}



.text:nth-of-type(2) {
  color: blue; /* 第二个元素的颜色 /
}
如果你想要的是对单个元素的文本内容的不同部分应用不同的颜色，可以使用CSS的伪元素::before或::after来添加额外的元素，并为它们设置颜色。
<p class=“text”>你好，世界！再见，世界！</p>
.text {
  position: relative;
  color: black; / 默认颜色 */
}



.text::before {
  content: ‘你好，’;
  color: red; /* 第一部分颜色 */
  position: absolute;
}



.text::after {
  content: ‘！再见，世界！’;
  color: blue; /* 第二部分颜色 /
  position: absolute;
  left: 100px; / 根据内容长度调整 */
}
这个例子中，::before伪元素将会显示红色的文本，而::after伪元素将会显示蓝色的文本。注意，使用伪元素时可能需要通过position属性来调整文本位置。
CSS

抄

css制作3D效果的文字

创建于 2024-03-21 18:30:26

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

<!DOCTYPE html>

<html lang=“en”>

<head>

<meta charset=“UTF-8”>

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

<title>3D 文字效果</title>

<style>



body {  




perspective: 1200px; /* 设置3D视角 */

  font-family: ‘Arial’, sans-serif;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

  margin: 0;

  background-color: #f5f5f5;

}



.three-d-text {

  color: #333;

  text-align: center;

  font-size: 2em;

  text-transform: uppercase;

  letter-spacing: 2px;

  transform: rotateX(30deg) rotateY(-10deg); /* 3D旋转 /

  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); / 文字阴影 /

  animation: float 3s ease-in-out infinite; / 文字浮动动画 */

}



@keyframes float {

  0%, 100% {



transform: translateY(0) rotateX(30deg) rotateY(-10deg);  




}

  50% {



transform: translateY(-10px) rotateX(30deg) rotateY(-10deg);  




}

}
</style>
</head>

<body>



<div class=“three-d-text”>3D 文字效果</div>



</body>

</html>
CSS

抄

css制作3D立体文字

创建于 2024-03-21 18:26:33

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

<div class=“text3d”>
<span> Hello World</span>

</div>
<style>
.text3d {
  display: inline-block;
  font-size: 60px;
  perspective: 500px; /* 相机距离 */
}



.text3d > span {
  display: block;
  transform-origin: center;
  transform-style: preserve-3d;
  transition: transform 1s ease-in-out;
}



.text3d:hover > span {
  transform: rotateX(360deg) rotateY(360deg);
}



</style>



当鼠标悬停在.text3d元素上时，通过改变.text3d > span的transform属性，可以使文字旋转形成3D效果。这里使用了perspective属性来创建一个近大远小的视觉效果，使3D旋转更加立体。



要为每个字母创建3D效果，可以将每个字母放在单独的<span>标签中，并对每个<span>应用不同的旋转和位置。



注意：以上代码示例为了简洁，省略了对字母进行具体旋转和位置的CSS规则。在实际应用中，你需要为每个字母指定不同的旋转角度和位置，以创建复杂的3D效果。
CSS

抄

css文字一个个慢慢出现效果怎么弄？

创建于 2024-03-21 18:24:39

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

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>字符出现动画</title>
<style>
  .reveal {



animation: fadeIn 2s forwards; /* 动画名称，持续时间，填充模式 */
opacity: 0; /* 初始透明度为0 */
overflow: hidden; /* 隐藏溢出文本 */
white-space: nowrap; /* 禁止换行 */




}



@keyframes fadeIn {



to {
  opacity: 1;
}




}
</style>
</head>
<body>



<h1 class=“reveal”>
  <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span>
  <span>,</span><span> </span><span>W</span><span>o</span><span>r</span><span>l</span><span>d</span>
  <span>!</span>
</h1>



</body>
</html>
在这个例子中，<span>标签被用来分割每个字符，并且每个<span>都应用了.reveal类。通过CSS，我们定义了一个fadeIn的关键帧动画，将opacity从0变为1，这样就能实现从透明到不透明的过渡效果。animation属性设置了动画的名称、持续时间和填充模式。



如果你想要更加细致地控制每个字符出现的时间，可以调整animation的duration（持续时间），并且为每个<span>定制不同的animation-delay（动画开始时间）。
CSS

抄

css 制作文字模糊发散效果怎么做？

创建于 2024-03-21 18:22:08

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

.blur-explosion {
  color: #333;
  font-size: 5em;
  text-align: center;
  font-weight: bold;
  text-shadow:



-1px -1px 0 #fff,
1px -1px 0 #fff,
-2px 0 0 #fff,
2px 0 0 #fff,
-3px 1px 0 #fff,
3px 1px 0 #fff,
-4px 2px 0 #fff,
4px 2px 0 #fff,
-5px 3px 0 #fff,
5px 3px 0 #fff,
-6px 4px 0 #fff,
6px 4px 0 #fff,
-7px 5px 0 #fff,
7px 5px 0 #fff,
-8px 6px 0 #fff,
8px 6px 0 #fff,
-9px 7px 0 #fff,
9px 7px 0 #fff,
-10px 8px 0 #fff,
10px 8px 0 #fff,
-11px 9px 0 #fff,
11px 9px 0 #fff;




}
<div class=“blur-explosion”>发散模糊</div>
这段代码会创建一个文字模糊发散的视觉效果，通过增加text-shadow的数量和模糊半径的范围，可以进一步增强这种效果。注意，为了防止文字变得不可读，应该确保阴影颜色不会与文字本身的颜色相同，这里使用的是白色#fff作为阴影颜色。
CSS

抄

css 制作文字阴影效果怎么做

创建于 2024-03-21 18:20:35

1
2
3
4
5

.shadowed-text {
  text-shadow: 2px 2px 2px #000000;
}
<div class=“shadowed-text”>这是带有阴影的文字</div>
在这个例子中，文字将会有一个水平偏移2px、垂直偏移2px的黑色阴影，且阴影模糊半径为2px。
CSS

抄

css 字体颜色 线性渐变

创建于 2024-03-21 18:19:23

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

.gradient-text {
  position: relative;
  font-size: 48px;
  color: #fff; /* 文本颜色设置为白色，以确保可读性 /
  overflow: hidden; / 确保伪元素不会超出容器边界 */
}



.gradient-text::before {
  content: attr(data-content); /* 使用data-*属性来存储原始文本 /
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(to right, #30CFD0, #330867); / 定义渐变色 /
  background-clip: text; / 背景剪切到文本形状 /
  -webkit-background-clip: text; / Safari支持 /
  color: transparent; / 文本颜色设置为透明 */
}
<div class=“gradient-text” data-content=“渐变文字”>渐变文字</div>
在这个例子中，.gradient-text元素的文本是不可见的，因为它的颜色被设置为透明。相反，.gradient-text::before伪元素创建了一个渐变的背景，背景会被剪切以匹配文本形状，从而实现文本的渐变效果。这种方法在大多数现代浏览器中有效，但需要注意的是，-webkit-background-clip: text;是一个非标准属性，主要用于Safari浏览器。
CSS

抄

css居中代码怎么写？

创建于 2024-03-21 18:15:47

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

对于行内元素（inline）或者display属性为inline-block、inline-flex等的元素，可以通过设置其父容器的text-align属性为center来实现水平居中。示例如下所示：
<style>
  .container {



text-align: center; /* 文本居中 */




}
</style>



<div class=“container”>
  这里放入需要居中的内容
</div>
对于块级元素（block）或者display属性为block、table等的元素，可以通过设置左右margin为auto来实现水平居中。示例如下所示：<style>
  .centered {



margin-left: auto;
margin-right: auto;




}
</style>



<div class=“centered”>
  这里放入需要居中的内容
</div>
对于单行文字的情况，可以通过设置line-height与高度相同来实现垂直居中。示例如下所示：



<style>
  .vertical-center {



height: 30px; /* 定义高度 */
line-height: 30px; /* 与高度保持一致 */




}
</style>



<p class=“vertical-center”>
  这里放入需要垂直居中的文字
</p>
对于多行文字或者图片等非单行元素，可以结合position和transform属性来实现垂直居中。示例如下所示：
<style>
  .parent {



position: relative; /* 必须设置relative/absolute/fixed等定位值 */
height: 200px; /* 定义高度 */




}



.child {



position: absolute; /* 子元素绝对定位 */
top: 50%; /* 上边界移动到父容器的50%处 */
transform: translateY(-50%); /* 向上移动自身高度的50% */




}
</style>



<div class=“parent”>
  <img src=“image.jpg” alt=“” class=“child”> <!– 这里放入需要垂直居中的元素 –>
</div>
CSS
1 2 3 4