抄代码

编程项目

HTML JavaScript CSS js

CSS特效

抄

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

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

<!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

<!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

<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

<!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

<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

<!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

.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

.shadowed-text {

  text-shadow: 2px 2px 2px #000000;

}

<div class=“shadowed-text”>这是带有阴影的文字</div>

在这个例子中，文字将会有一个水平偏移2px、垂直偏移2px的黑色阴影，且阴影模糊半径为2px。
CSS

抄

css 字体颜色 线性渐变

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

.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

对于行内元素（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