抄
創(chuàng)建于 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; /* 文字顏色設(shè)置為透明 */ 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>
font-size: 60px; font-weight: bold; color: transparent; /* 文字顏色設(shè)置為透明 */ 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>
創(chuàng)建于 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>
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>
創(chuàng)建于 2024-03-21 18:34:04
<p class=“text”>你好，世界！再見，世界！</p> .text { color: black; /* 默認(rèn)顏色 */ } .text:nth-of-type(1) { color: red; /* 第一個(gè)元素的顏色 */ } .text:nth-of-type(2) { color: blue; /* 第二個(gè)元素的顏色 / } 如果你想要的是對(duì)單個(gè)元素的文本內(nèi)容的不同部分應(yīng)用不同的顏色，可以使用CSS的偽元素::before或::after來添加額外的元素，并為它們?cè)O(shè)置顏色。 <p class=“text”>你好，世界！再見，世界！</p> .text { position: relative; color: black; / 默認(rèn)顏色 */ } .text::before { content: ‘你好，’; color: red; /* 第一部分顏色 */ position: absolute; } .text::after { content: ‘！再見，世界！’; color: blue; /* 第二部分顏色 / position: absolute; left: 100px; / 根據(jù)內(nèi)容長(zhǎng)度調(diào)整 */ } 這個(gè)例子中，::before偽元素將會(huì)顯示紅色的文本，而::after偽元素將會(huì)顯示藍(lán)色的文本。注意，使用偽元素時(shí)可能需要通過position屬性來調(diào)整文本位置。
.text:nth-of-type(1) { color: red; /* 第一個(gè)元素的顏色 */ }
.text:nth-of-type(2) { color: blue; /* 第二個(gè)元素的顏色 / } 如果你想要的是對(duì)單個(gè)元素的文本內(nèi)容的不同部分應(yīng)用不同的顏色，可以使用CSS的偽元素::before或::after來添加額外的元素，并為它們?cè)O(shè)置顏色。 <p class=“text”>你好，世界！再見，世界！</p> .text { position: relative; color: black; / 默認(rèn)顏色 */ }
.text::before { content: ‘你好，’; color: red; /* 第一部分顏色 */ position: absolute; }
.text::after { content: ‘！再見，世界！’; color: blue; /* 第二部分顏色 / position: absolute; left: 100px; / 根據(jù)內(nèi)容長(zhǎng)度調(diào)整 */ } 這個(gè)例子中，::before偽元素將會(huì)顯示紅色的文本，而::after偽元素將會(huì)顯示藍(lán)色的文本。注意，使用偽元素時(shí)可能需要通過position屬性來調(diào)整文本位置。
創(chuàng)建于 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; /* 設(shè)置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旋轉(zhuǎn) / text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); / 文字陰影 / animation: float 3s ease-in-out infinite; / 文字浮動(dòng)動(dòng)畫 */ } @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>
body {
perspective: 1200px; /* 設(shè)置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旋轉(zhuǎn) / text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); / 文字陰影 / animation: float 3s ease-in-out infinite; / 文字浮動(dòng)動(dòng)畫 */ }
@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>
創(chuàng)建于 2024-03-21 18:26:33
<div class=“text3d”> <span> Hello World</span> </div> <style> .text3d { display: inline-block; font-size: 60px; perspective: 500px; /* 相機(jī)距離 */ } .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> 當(dāng)鼠標(biāo)懸停在.text3d元素上時(shí)，通過改變.text3d > span的transform屬性，可以使文字旋轉(zhuǎn)形成3D效果。這里使用了perspective屬性來創(chuàng)建一個(gè)近大遠(yuǎn)小的視覺效果，使3D旋轉(zhuǎn)更加立體。 要為每個(gè)字母創(chuàng)建3D效果，可以將每個(gè)字母放在單獨(dú)的<span>標(biāo)簽中，并對(duì)每個(gè)<span>應(yīng)用不同的旋轉(zhuǎn)和位置。 注意：以上代碼示例為了簡(jiǎn)潔，省略了對(duì)字母進(jìn)行具體旋轉(zhuǎn)和位置的CSS規(guī)則。在實(shí)際應(yīng)用中，你需要為每個(gè)字母指定不同的旋轉(zhuǎn)角度和位置，以創(chuàng)建復(fù)雜的3D效果。
.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>
當(dāng)鼠標(biāo)懸停在.text3d元素上時(shí)，通過改變.text3d > span的transform屬性，可以使文字旋轉(zhuǎn)形成3D效果。這里使用了perspective屬性來創(chuàng)建一個(gè)近大遠(yuǎn)小的視覺效果，使3D旋轉(zhuǎn)更加立體。
要為每個(gè)字母創(chuàng)建3D效果，可以將每個(gè)字母放在單獨(dú)的<span>標(biāo)簽中，并對(duì)每個(gè)<span>應(yīng)用不同的旋轉(zhuǎn)和位置。
注意：以上代碼示例為了簡(jiǎn)潔，省略了對(duì)字母進(jìn)行具體旋轉(zhuǎn)和位置的CSS規(guī)則。在實(shí)際應(yīng)用中，你需要為每個(gè)字母指定不同的旋轉(zhuǎn)角度和位置，以創(chuàng)建復(fù)雜的3D效果。
創(chuàng)建于 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>字符出現(xiàn)動(dòng)畫</title> <style> .reveal { animation: fadeIn 2s forwards; /* 動(dòng)畫名稱，持續(xù)時(shí)間，填充模式 */ 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> 在這個(gè)例子中，<span>標(biāo)簽被用來分割每個(gè)字符，并且每個(gè)<span>都應(yīng)用了.reveal類。通過CSS，我們定義了一個(gè)fadeIn的關(guān)鍵幀動(dòng)畫，將opacity從0變?yōu)?，這樣就能實(shí)現(xiàn)從透明到不透明的過渡效果。animation屬性設(shè)置了動(dòng)畫的名稱、持續(xù)時(shí)間和填充模式。 如果你想要更加細(xì)致地控制每個(gè)字符出現(xiàn)的時(shí)間，可以調(diào)整animation的duration（持續(xù)時(shí)間），并且為每個(gè)<span>定制不同的animation-delay（動(dòng)畫開始時(shí)間）。
animation: fadeIn 2s forwards; /* 動(dòng)畫名稱，持續(xù)時(shí)間，填充模式 */ opacity: 0; /* 初始透明度為0 */ overflow: hidden; /* 隱藏溢出文本 */ white-space: nowrap; /* 禁止換行 */
}
@keyframes fadeIn {
to { opacity: 1; }
<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> 在這個(gè)例子中，<span>標(biāo)簽被用來分割每個(gè)字符，并且每個(gè)<span>都應(yīng)用了.reveal類。通過CSS，我們定義了一個(gè)fadeIn的關(guān)鍵幀動(dòng)畫，將opacity從0變?yōu)?，這樣就能實(shí)現(xiàn)從透明到不透明的過渡效果。animation屬性設(shè)置了動(dòng)畫的名稱、持續(xù)時(shí)間和填充模式。
如果你想要更加細(xì)致地控制每個(gè)字符出現(xiàn)的時(shí)間，可以調(diào)整animation的duration（持續(xù)時(shí)間），并且為每個(gè)<span>定制不同的animation-delay（動(dòng)畫開始時(shí)間）。
創(chuàng)建于 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”>發(fā)散模糊</div> 這段代碼會(huì)創(chuàng)建一個(gè)文字模糊發(fā)散的視覺效果，通過增加text-shadow的數(shù)量和模糊半徑的范圍，可以進(jìn)一步增強(qiáng)這種效果。注意，為了防止文字變得不可讀，應(yīng)該確保陰影顏色不會(huì)與文字本身的顏色相同，這里使用的是白色#fff作為陰影顏色。
-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”>發(fā)散模糊</div> 這段代碼會(huì)創(chuàng)建一個(gè)文字模糊發(fā)散的視覺效果，通過增加text-shadow的數(shù)量和模糊半徑的范圍，可以進(jìn)一步增強(qiáng)這種效果。注意，為了防止文字變得不可讀，應(yīng)該確保陰影顏色不會(huì)與文字本身的顏色相同，這里使用的是白色#fff作為陰影顏色。
創(chuàng)建于 2024-03-21 18:20:35
.shadowed-text { text-shadow: 2px 2px 2px #000000; } <div class=“shadowed-text”>這是帶有陰影的文字</div> 在這個(gè)例子中，文字將會(huì)有一個(gè)水平偏移2px、垂直偏移2px的黑色陰影，且陰影模糊半徑為2px。
創(chuàng)建于 2024-03-21 18:19:23
.gradient-text { position: relative; font-size: 48px; color: #fff; /* 文本顏色設(shè)置為白色，以確?？勺x性 / overflow: hidden; / 確保偽元素不會(huì)超出容器邊界 */ } .gradient-text::before { content: attr(data-content); /* 使用data-*屬性來存儲(chǔ)原始文本 / 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; / 文本顏色設(shè)置為透明 */ } <div class=“gradient-text” data-content=“漸變文字”>漸變文字</div> 在這個(gè)例子中，.gradient-text元素的文本是不可見的，因?yàn)樗念伾辉O(shè)置為透明。相反，.gradient-text::before偽元素創(chuàng)建了一個(gè)漸變的背景，背景會(huì)被剪切以匹配文本形狀，從而實(shí)現(xiàn)文本的漸變效果。這種方法在大多數(shù)現(xiàn)代瀏覽器中有效，但需要注意的是，-webkit-background-clip: text;是一個(gè)非標(biāo)準(zhǔn)屬性，主要用于Safari瀏覽器。
.gradient-text::before { content: attr(data-content); /* 使用data-*屬性來存儲(chǔ)原始文本 / 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; / 文本顏色設(shè)置為透明 */ } <div class=“gradient-text” data-content=“漸變文字”>漸變文字</div> 在這個(gè)例子中，.gradient-text元素的文本是不可見的，因?yàn)樗念伾辉O(shè)置為透明。相反，.gradient-text::before偽元素創(chuàng)建了一個(gè)漸變的背景，背景會(huì)被剪切以匹配文本形狀，從而實(shí)現(xiàn)文本的漸變效果。這種方法在大多數(shù)現(xiàn)代瀏覽器中有效，但需要注意的是，-webkit-background-clip: text;是一個(gè)非標(biāo)準(zhǔn)屬性，主要用于Safari瀏覽器。
創(chuàng)建于 2024-03-21 18:15:47
對(duì)于行內(nèi)元素（inline）或者display屬性為inline-block、inline-flex等的元素，可以通過設(shè)置其父容器的text-align屬性為center來實(shí)現(xiàn)水平居中。示例如下所示： <style> .container { text-align: center; /* 文本居中 */ } </style> <div class=“container”> 這里放入需要居中的內(nèi)容 </div>
text-align: center; /* 文本居中 */
} </style>
<div class=“container”> 這里放入需要居中的內(nèi)容 </div>
對(duì)于塊級(jí)元素（block）或者display屬性為block、table等的元素，可以通過設(shè)置左右margin為auto來實(shí)現(xiàn)水平居中。示例如下所示：<style> .centered { margin-left: auto; margin-right: auto; } </style> <div class=“centered”> 這里放入需要居中的內(nèi)容 </div>
對(duì)于塊級(jí)元素（block）或者display屬性為block、table等的元素，可以通過設(shè)置左右margin為auto來實(shí)現(xiàn)水平居中。示例如下所示：
<style> .centered { margin-left: auto; margin-right: auto; } </style> <div class=“centered”> 這里放入需要居中的內(nèi)容 </div>
margin-left: auto; margin-right: auto;
<div class=“centered”> 這里放入需要居中的內(nèi)容 </div>
對(duì)于單行文字的情況，可以通過設(shè)置line-height與高度相同來實(shí)現(xiàn)垂直居中。示例如下所示： <style> .vertical-center { height: 30px; /* 定義高度 */ line-height: 30px; /* 與高度保持一致 */ } </style> <p class=“vertical-center”> 這里放入需要垂直居中的文字 </p>
<style> .vertical-center {
height: 30px; /* 定義高度 */ line-height: 30px; /* 與高度保持一致 */
<p class=“vertical-center”> 這里放入需要垂直居中的文字 </p>
對(duì)于多行文字或者圖片等非單行元素，可以結(jié)合position和transform屬性來實(shí)現(xiàn)垂直居中。示例如下所示： <style> .parent { position: relative; /* 必須設(shè)置relative/absolute/fixed等定位值 */ height: 200px; /* 定義高度 */ } .child { position: absolute; /* 子元素絕對(duì)定位 */ top: 50%; /* 上邊界移動(dòng)到父容器的50%處 */ transform: translateY(-50%); /* 向上移動(dòng)自身高度的50% */ } </style> <div class=“parent”> <img src=“image.jpg” alt=“” class=“child”> <!– 這里放入需要垂直居中的元素 –> </div>
position: relative; /* 必須設(shè)置relative/absolute/fixed等定位值 */ height: 200px; /* 定義高度 */
.child {
position: absolute; /* 子元素絕對(duì)定位 */ top: 50%; /* 上邊界移動(dòng)到父容器的50%處 */ transform: translateY(-50%); /* 向上移動(dòng)自身高度的50% */
<div class=“parent”> <img src=“image.jpg” alt=“” class=“child”> <!– 這里放入需要垂直居中的元素 –> </div>