隨機顯示文字css 在網頁設計中，展示不同樣式的隨機文字可以為頁面增添新穎趣味的感覺。使用css可以輕松實現這一效果。 我們可以使用偽元素與data-屬性來實現隨機文字的展示效果。首先，在HTML中，在目標元素（比如P標簽）上添加data-屬性，存儲需要隨機顯示的文字列表。如下所示：

<p data-words="Hello, World!|Welcome to my website!|Checkout my latest work!"></p>

然后，通過CSS中的偽元素before，利用content屬性來將data-中的文字隨機顯示出來。具體代碼如下：

p:before {
content: attr(data-words); /* 獲取data-words中的文字列表 */
position: absolute; /* 將文字覆蓋在目標元素之上 */
opacity: 0; /* 將文字隱藏 */
transition: opacity 0.5s ease-in-out; /* 使用漸變效果顯示隨機文字 */
}
p:hover:before, /* 鼠標懸停時展示隨機文字 */
p:focus:before {
opacity: 1; /* 顯示文字 */
transform: translateY(-10px); /* 每次隨機顯示時將文字向上移動10px */
animation: word-animate 0.5s ease-in-out; /* 使用動畫讓文字更具動感 */
}
@keyframes word-animate {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
opacity: 0.5;
}
100% {
transform: translateY(-10px);
opacity: 1;
}
}

這段代碼中，我們使用了CSS中的動畫效果，讓隨機文字具有更加生動的視覺效果。可以根據需要進行調整。 通過上述方法使用css隨機顯示文字，可以為網頁帶來更多的趣味和搶眼的視覺效果。