92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

前端藝術之毛玻璃-傾斜-日歷

2023-2-1 前端達人

前端藝術之毛玻璃-傾斜-日歷

描述
項目

描述

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

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

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

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

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

項目

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

效果

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; } 






    
        藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
    

    
         
    

    
        分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 
    

    
        藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司