首頁

JS特效

CSS3特效

CSS3繪製2018年新年快樂文字動畫特效

現在下載預覽

<風格>
@import url("https://fonts.googleapis.com/css?family=Ultra");
身體{
背景顏色：#070707;
字體系列：'Ultra'，襯線；
}

.container {
高度：250px；
寬度：450px；
填充：0；
邊距：0；
位置：固定；
上：0；
底部：0；
左：0；
右：0；
邊距：自動；
列表樣式類型：無；
邊框半徑：10px；
文字對齊：居中；
顏色：#E8DDB5；
字體大小：4rem;
行高：1；
}
.container .newYear {
顯示：內聯區塊；
字體大小：8rem;
邊距：0；
左：50%；
變換：translateX(-50%);
位置：絕對；
邊距：自動；
顏色：#070707；
動畫：animate 2s 輕鬆無限；
底部：0；
}

@keyframes 動畫 {
0%,100% {
文字陰影：4px 0px 1px #E8DDB5、6px 0px 1px #E8DDB5、8px 0px 1px #E8DDB5、10px 0px 1px #E8DDB5;
}
50% {
文字陰影：-4px 0px 1px #E8DDB5，-6px 0px 1px #E8DDB5，-4px 0px 1px #E8DDB5，-10px 0px 1px #E8DDB5;
}
}
</風格>

一款好看的CSS3相當於2018新年快樂文字動畫效果，字體是外部引用谷歌的某種英文字體樣式，如果換成中文的話，可以根據你的視力選擇字體。

免責聲明

本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性！本站所有資源僅供學習參考。請不要將它們用於商業目的。否則，一切後果都由您負責！如有侵權，請聯絡我們刪除。聯絡方式：admin@php.cn

如何熟練運用CSS3特效提升網頁的使用者體驗

09 Sep 2023

如何熟練運用CSS3特效提升網頁的使用者體驗隨著網路的發展，網頁設計與使用者體驗成為了網站開發的重要環節。而CSS3特效的應用，可為網頁增添動感與視覺效果，提升使用者體驗。本文將介紹幾種常見的CSS3特效及其程式碼範例，幫助開發者更熟練地運用CSS3特效，提升網頁的使用者體驗。過渡效果（Transition）過渡效果是CSS3中最基本的特效之一，透過改變某個屬