抄
創(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; /* 文字顏色設置為透明 */ 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; /* 文字顏色設置為透明 */ 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; /* 默認顏色 */ } .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; / 根據(jù)內容長度調整 */ } 這個例子中，::before偽元素將會顯示紅色的文本，而::after偽元素將會顯示藍色的文本。注意，使用偽元素時可能需要通過position屬性來調整文本位置。
.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; / 根據(jù)內容長度調整 */ } 這個例子中，::before偽元素將會顯示紅色的文本，而::after偽元素將會顯示藍色的文本。注意，使用偽元素時可能需要通過position屬性來調整文本位置。
創(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; /* 設置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>
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>
創(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; /* 相機距離 */ } .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屬性來創(chuàng)建一個近大遠小的視覺效果，使3D旋轉更加立體。 要為每個字母創(chuàng)建3D效果，可以將每個字母放在單獨的<span>標簽中，并對每個<span>應用不同的旋轉和位置。 注意：以上代碼示例為了簡潔，省略了對字母進行具體旋轉和位置的CSS規(guī)則。在實際應用中，你需要為每個字母指定不同的旋轉角度和位置，以創(chuàng)建復雜的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>
當鼠標懸停在.text3d元素上時，通過改變.text3d > span的transform屬性，可以使文字旋轉形成3D效果。這里使用了perspective屬性來創(chuàng)建一個近大遠小的視覺效果，使3D旋轉更加立體。
要為每個字母創(chuàng)建3D效果，可以將每個字母放在單獨的<span>標簽中，并對每個<span>應用不同的旋轉和位置。
注意：以上代碼示例為了簡潔，省略了對字母進行具體旋轉和位置的CSS規(guī)則。在實際應用中，你需要為每個字母指定不同的旋轉角度和位置，以創(chuàng)建復雜的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)動畫</title> <style> .reveal { animation: fadeIn 2s forwards; /* 動畫名稱，持續(xù)時間，填充模式 */ 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變?yōu)?，這樣就能實現(xiàn)從透明到不透明的過渡效果。animation屬性設置了動畫的名稱、持續(xù)時間和填充模式。 如果你想要更加細致地控制每個字符出現(xiàn)的時間，可以調整animation的duration（持續(xù)時間），并且為每個<span>定制不同的animation-delay（動畫開始時間）。
animation: fadeIn 2s forwards; /* 動畫名稱，持續(xù)時間，填充模式 */ 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> 在這個例子中，<span>標簽被用來分割每個字符，并且每個<span>都應用了.reveal類。通過CSS，我們定義了一個fadeIn的關鍵幀動畫，將opacity從0變?yōu)?，這樣就能實現(xiàn)從透明到不透明的過渡效果。animation屬性設置了動畫的名稱、持續(xù)時間和填充模式。
如果你想要更加細致地控制每個字符出現(xiàn)的時間，可以調整animation的duration（持續(xù)時間），并且為每個<span>定制不同的animation-delay（動畫開始時間）。
創(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> 這段代碼會創(chuàng)建一個文字模糊發(fā)散的視覺效果，通過增加text-shadow的數(shù)量和模糊半徑的范圍，可以進一步增強這種效果。注意，為了防止文字變得不可讀，應該確保陰影顏色不會與文字本身的顏色相同，這里使用的是白色#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> 這段代碼會創(chuàng)建一個文字模糊發(fā)散的視覺效果，通過增加text-shadow的數(shù)量和模糊半徑的范圍，可以進一步增強這種效果。注意，為了防止文字變得不可讀，應該確保陰影顏色不會與文字本身的顏色相同，這里使用的是白色#fff作為陰影顏色。
創(chuàng)建于 2024-03-21 18:20:35
.shadowed-text { text-shadow: 2px 2px 2px #000000; } <div class=“shadowed-text”>這是帶有陰影的文字</div> 在這個例子中，文字將會有一個水平偏移2px、垂直偏移2px的黑色陰影，且陰影模糊半徑為2px。
創(chuàng)建于 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偽元素創(chuàng)建了一個漸變的背景，背景會被剪切以匹配文本形狀，從而實現(xiàn)文本的漸變效果。這種方法在大多數(shù)現(xiàn)代瀏覽器中有效，但需要注意的是，-webkit-background-clip: text;是一個非標準屬性，主要用于Safari瀏覽器。
.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偽元素創(chuàng)建了一個漸變的背景，背景會被剪切以匹配文本形狀，從而實現(xiàn)文本的漸變效果。這種方法在大多數(shù)現(xiàn)代瀏覽器中有效，但需要注意的是，-webkit-background-clip: text;是一個非標準屬性，主要用于Safari瀏覽器。
創(chuàng)建于 2024-03-21 18:15:47
對于行內元素（inline）或者display屬性為inline-block、inline-flex等的元素，可以通過設置其父容器的text-align屬性為center來實現(xiàn)水平居中。示例如下所示： <style> .container { text-align: center; /* 文本居中 */ } </style> <div class=“container”> 這里放入需要居中的內容 </div>
text-align: center; /* 文本居中 */
} </style>
<div class=“container”> 這里放入需要居中的內容 </div>
對于塊級元素（block）或者display屬性為block、table等的元素，可以通過設置左右margin為auto來實現(xiàn)水平居中。示例如下所示：<style> .centered { margin-left: auto; margin-right: auto; } </style> <div class=“centered”> 這里放入需要居中的內容 </div>
對于塊級元素（block）或者display屬性為block、table等的元素，可以通過設置左右margin為auto來實現(xiàn)水平居中。示例如下所示：
<style> .centered { margin-left: auto; margin-right: auto; } </style> <div class=“centered”> 這里放入需要居中的內容 </div>
margin-left: auto; margin-right: auto;
<div class=“centered”> 這里放入需要居中的內容 </div>
對于單行文字的情況，可以通過設置line-height與高度相同來實現(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>
對于多行文字或者圖片等非單行元素，可以結合position和transform屬性來實現(xiàn)垂直居中。示例如下所示： <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>
position: relative; /* 必須設置relative/absolute/fixed等定位值 */ height: 200px; /* 定義高度 */
.child {
position: absolute; /* 子元素絕對定位 */ top: 50%; /* 上邊界移動到父容器的50%處 */ transform: translateY(-50%); /* 向上移動自身高度的50% */
<div class=“parent”> <img src=“image.jpg” alt=“” class=“child”> <!– 這里放入需要垂直居中的元素 –> </div>