<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          

	
          
		
          
			
          
				
          前端藝術之毛玻璃-傾斜-日歷
          
				
           2023-2-1      前端達人      
          
			
          
			
          
				
          
    
          
        前端藝術之毛玻璃-傾斜-日歷
    
          
    

          

          
    描述

          

          
    
          
        
            
          
                
                    項目
                
                
                    描述
                
            
          
                  
        
            
          
                
                    開發語言
                
                
                    HTML、JavaScript、CSS
                
            
          
            
          
                
                    庫
                
                
                    dyCalendarJS、vanilla-tilt
                
            
          
            
          
                
                    Edge
                
                
                    108.0.1462.54 (正式版本) (64 位)
                
            
          
                  
    
          

          

          
    該項目中需要使用到的庫有：

          

            
    
          1. 
        dyCalendarJS
            
vanilla-tilt.js 是 JavaScript 中的一個平滑的 3D 傾斜庫。
    
            2. 
    
          2. 
        vanilla-tilt
            
dyCalendarJS 是一個用于創建日歷的 JavaScript 庫，您可以在博客和網站中免費使用它。
    
            3. 

          

          
    如果你在觀看本篇文章前并沒有對這兩個庫進行了解，歡迎移步至我的另外兩篇文章進行學習：

          

            
    
          1. 
        JavaScript 庫之 vanilla-tilt（一個平滑的 3D 傾斜庫）
    
            2. 
    
          2. 
        JavaScript 庫之 dyCalendarJS（日歷）
    
            3. 

          

          
    項目

          

          
    該項目文件中我已對代碼進行了注釋。如遇不懂的地方，請嘗試查看相關注釋。

          

          
    效果

          

          
    效果

          

          
    效果

          

          
    index.html

          

          <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>毛玻璃-傾斜-日歷</title> <!-- 導入自定義 CSS 文件 --> <link rel="stylesheet" href="./index.css"> <!-- 導入 dycalendar.css --> <link rel="stylesheet" href="../dycalendar.min.css"> </head> <body> <div id="calendar" class="dycalendar-container"></div> <!-- 導入 dycalendar.js --> <script src="../dycalendar.min.js"></script> <!-- 導入 vanilla-tilt.js --> <script src="../vanilla-tilt.js"></script> <script> // 繪制日歷 dycalendar.draw({ target: '#calendar', // 指定用于創建日歷的 HTML 容器 type: 'month', // 設置日歷的類型 prevnextbutton: 'show', // 顯示 "<" 及 ">" 按鈕 highlighttoday: true // 高亮顯示當前日期 }) // 為目標元素添加傾斜效果 VanillaTilt.init(document.querySelector('#calendar'), { target: '#calendar', // 指定需要添加傾斜效果的目標元素 scale: 0.8, // 鼠標懸停于目標元素上時，目標元素的放縮倍數 glare: true, // 是否設置反光效果 'max-glare': 0.6 // 設置反光效果的強度 }) </script> </body> </html> 

          
    

          


            

    
          • 
        1
    
            • 

    
          • 
        2
    
            • 

    
          • 
        3
    
            • 

    
          • 
        4
    
            • 

    
          • 
        5
    
            • 

    
          • 
        6
    
            • 

    
          • 
        7
    
            • 

    
          • 
        8
    
            • 

    
          • 
        9
    
            • 

    
          • 
        10
    
            • 

    
          • 
        11
    
            • 

    
          • 
        12
    
            • 

    
          • 
        13
    
            • 

    
          • 
        14
    
            • 

    
          • 
        15
    
            • 

    
          • 
        16
    
            • 

    
          • 
        17
    
            • 

    
          • 
        18
    
            • 

    
          • 
        19
    
            • 

    
          • 
        20
    
            • 

    
          • 
        21
    
            • 

    
          • 
        22
    
            • 

    
          • 
        23
    
            • 

    
          • 
        24
    
            • 

    
          • 
        25
    
            • 

    
          • 
        26
    
            • 

    
          • 
        27
    
            • 

    
          • 
        28
    
            • 

    
          • 
        29
    
            • 

    
          • 
        30
    
            • 

    
          • 
        31
    
            • 

    
          • 
        32
    
            • 

    
          • 
        33
    
            • 

    
          • 
        34
    
            • 

    
          • 
        35
    
            • 

    
          • 
        36
    
            • 

    
          • 
        37
    
            • 

    
          • 
        38
    
            • 

    
          • 
        39
    
            • 


          

          

          
    index.css

          

          *{ /* 去除元素默認的內外邊距 */ margin: 0px; padding: 0px; /* 
    設置邊框時將壓縮內容區域，而不會向外擴張。
    也就是說，為某個元素設置邊框并不會改變其寬高。
     */ box-sizing: border-box; } body{ /* 顯示區域的最小高度為顯示窗口的高度 */ min-height: 100vh; /* 設置該元素內部元素居中顯示 */ display: flex; justify-content: center; align-items: center; /* 設置該元素的背景顏色 */ background-color: #161623; } body::before{ /* 若需要正常使用偽元素，必須為其設置 content 屬性 */ content: ''; width: 400px; height: 400px; /* 設置顏色漸變效果 */ background: linear-gradient(#ffc107,#e91e63); /* 設置邊框圓角，當該屬性的值為 50% 時元素邊框將顯示為一個圓 */ border-radius: 50%; /* 
    為該元素設置絕對定位，阻止該元素遮擋日歷
    （定位元素可以設置 z-index 來調節顯示順序，
    z-index 的值越高，顯示優先級越大）。
     */ position: absolute; top: 10%; left: 20%; z-index: -1; } body::after{ content: ''; width: 300px; height: 300px; position: absolute; background: linear-gradient(#2196f3,#31ff38); border-radius: 50%; top: 45%; left: 55%; z-index: -1; } #calendar{ /* 設置日歷的寬高 */ width: 400px; height: 400px; color: #fff; /* 
    設置日歷的背景元素，為產生毛玻璃效果，這里將背景顏色設置為白色，
    將透明度設置為 0.1（透明度的取值范圍為 0~1，取值越接近 1 ，顏色
    越不透明）。
     */ background-color: rgb(255, 255, 255, 0.1); /* 
    設置 blur 過濾器，該過濾器可以將背景模糊化，參數中的
    像素值設定越高，顯示得越是模糊。
    */ backdrop-filter: blur(50px); /* 分別設置日歷的四條邊框，使日歷顯示得更為立體 */ border-top: 1px solid rgb(255, 255, 255, 0.5); border-left: 1px solid rgb(255, 255, 255, 0.5); border-right: 1px solid rgb(255, 255, 255, 0.2); border-bottom: 1px solid rgb(255, 255, 255, 0.2); border-radius: 5px; /* 設置日歷的內邊距 */ padding: 0px 20px; /* 
    設置日歷周邊的陰影效果，box-shadow 接收的值（如下）分別為
    陰影的 X 偏移量、陰影的 Y 偏移量、擴散半徑、陰影顏色。
    */ box-shadow: 5px 10px 10px rgb(0, 0, 0, 0.1); } /* 
這里存在許多在 HTML 文件中沒有看到的類名，這是因為這些標簽
是 dyCalendarJS 通過 JavaScript 動態創建的元素，如果有需要對
日歷中的某些元素的樣式進行改變，可以通過瀏覽器的 檢查 功能來查看
JavaScript 創建的元素并對其樣式進行適當的修改。
*/ /* 
有些元素需要通過修改傳遞給 dycalendar.draw() 的配置對象中的
部分屬性才能夠被發現。
*/ /* 設置日歷的頭部部分的樣式 */ #calendar .dycalendar-header{ margin-top: 60px; font-size: 20px; } /*
 設置日歷 "<" 及 ">" 按鈕的樣式，應用該樣式時請將 
 傳遞給 dycalendar.draw() 的配置對象中的 prevnextbutton 
 屬性的值設置為 true 。
 */ #calendar .dycalendar-header .prev-btn,
#calendar .dycalendar-header .next-btn{ width: 40px; height: 30px; background-color: rgb(255, 255, 255, 0.15); /* 設置文本對其方式及行高以使 ">" 及 "<" 居中顯示 */ text-align: center; line-height: 30px; /* 設置上下方向的外邊距為 0px，設置左右方向的外邊距為 5px */ margin: 0px 5px; } #calendar .dycalendar-body table{ width: 100%; height: 100%; margin-top: 50px; } /* tr:nth-child(1) 選擇 table 標簽中的第一個 tr 元素 */ /* 設置日歷中星期（星期幾）標識的樣式 */ #calendar .dycalendar-body table tr:nth-child(1) td{ background-color: rgb(255, 255, 255, 0.15); margin-bottom: 20px; } #calendar .dycalendar-body table td{ border-radius: 3px; /* 設置鼠標懸停時的指針樣式 */ cursor: pointer; } /* 
:hover 偽類選擇器用于設置鼠標懸停在指定元素時，
某個元素的樣式
*/ #calendar .dycalendar-today-date,
#calendar .dycalendar-body table td:hover{ color: #000; /* 
    使用 !important 提升該屬性在多個設置了該屬性的選擇器
    中的權重
    */ background-color: #fff !important; } 

          


          
          


          				
          
								
			
          
		
          
		
		
	
          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合