Guru Nanak dev ji Jayanti 使用 html css 和 javascript 程式碼製作特殊動畫

    
    
    <title>Guru Nanak Jayanti 動畫</title>
    
        身體 {
            背景：線性漸變（135deg，#ffeb3b，#f57f17）；
            顯示：柔性；
            調整內容：居中；
            對齊項目：居中；
            高度：100vh；
            溢出：隱藏；
            保證金：0；
            字體系列：“Poppins”，無襯線字體；
            位置：相對；
        }
        。容器 {
            文字對齊：居中；
            顏色：#fff；
            動畫：淡入2秒緩入淡出；
        }
        .container img {
            寬度：200px；
            高度：自動；
            底部邊距：10px；
            動畫：發光2s無限交替；
        }
        h1 {
            字體大小：2rem；
            文字陰影: 0 0 10px rgba(255, 255, 255, 0.8);
        }
        .教學{
            上邊距：20px；
            顯示：柔性；
        }
        .教學盒{
            寬度：160 像素；
            高度：100px；
            邊距：自動 10 像素；
            內邊距：15px；
            背景：#333；
            邊框半徑：12px；
            盒子陰影：0 4px 15px rgba(0, 0, 0, 0.2);
            不透明度：0；
            變換：翻譯Y（50px）；
            動畫：向前滑動1.5秒；
        }
        .教學盒:第n個孩子(1) {
            背景：#ff7043； /* 橘子 */
            動畫延遲：0.5s；
        }
        .教學盒:第n個孩子(2) {
            背景：#42a5f5； /* 藍色的 */
            動畫延遲：1s；
        }
        .教學盒:第n個孩子(3) {
            背景：#66bb6a; /* 綠色的 */
            動畫延遲：1.5s；
        }
        .教學標題{
            字體大小：1.4rem；
            字體粗細：粗體；
            下邊距：5px；
        }
        .教學潛台詞{
            字體大小：1rem；
        }
        。花朵 {
            位置：絕對；
            上：-50px；
            寬度：100%；
            高度：100%；
            指針事件：無；
            顯示：柔性；
            彈性包裹：包裹；
        }
        。花 {
            位置：絕對；
            字體大小：30px；
            動畫：下落線性無限；
        }
        @關鍵影格下降{
            來自 { 變換：translateY(-100vh) 旋轉(0deg); }
            到 { 變換：translateY(100vh) 旋轉(360deg); }
        }
        @關鍵影格淡入{
            來自{ 不透明度：0; }
            至 { 不透明度：1; }
        }
        @關鍵影格發光{
            來自 { 過濾器： drop-shadow(0 0 10px #fff); }
            到 { 過濾器：drop-shadow(0 0 30px #ffeb3b); }
        }
        @keyframes SlideUp {
            到 { 變換：translateY(0);不透明度：1； }
        }/* 花按鈕 */
        .flower-按鈕 {
            位置：固定；
            右：20 像素；
            底部：20px；
            字體大小：30px；
            背景：無；
            邊框：無；
            遊標：指針；
            動畫：發光1.5s無限交替；
        }
    風格>
頭>

    <div>




          </div>

            
        

以上是Guru Nanak dev ji Jayanti 使用 html css 和 javascript 程式碼製作特殊動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！