[發明專利]一種web端在線編輯生成CSS樣式代碼的系統

在審

• 申請號: 202011320418.2
• 申請日: 2020-11-23
• 公開（公告）號: CN112230925A
• 公開（公告）日: 2021-01-15
• 發明（設計）人: 馬少博;劉津
• 申請（專利權）人: 浪潮云信息技術股份公司
• 主分類號: G06F8/38
• 分類號: G06F8/38
• 代理公司: 濟南信達專利事務所有限公司 37100
• 代理人: 姜鵬

本發明涉及軟件開發技術領域，具體提供了一種web端在線編輯生成CSS樣式代碼的系統，用戶設置操作模塊，所述操作模塊用于用戶編輯元素和設置參數，設置參數后生成預覽模塊，預覽模塊用于預覽效果，通過JS代碼生成對應的代碼模塊。與現有技術相比，本發明的一種web端在線編輯生成CSS樣式代碼的系統，可以在本系統最終生成需要的CSS代碼,可以提升開發人員的工作效率,提升代碼的穩定性。另外本系統也可以幫助開發人員設計出更好效果的CSS樣式代碼，具有良好的推廣價值。

技術領域

本發明涉及軟件開發技術領域，具體提供一種web端在線編輯生成CSS樣式代碼的系統。

背景技術

目前,網頁開發中,在開發復雜CSS效果時,需要用戶手動編寫代碼實現效果。如果某個HTML元素設計效果比較或者與想要實現的效果有差異，需要頻繁手動修改代碼并預覽界面，比較麻煩且費精力。

發明內容

本發明是針對上述現有技術的不足，提供一種設計合理，安全適用的web端在線編輯生成CSS樣式代碼的系統。

本發明解決其技術問題所采用的技術方案是：

一種web端在線編輯生成CSS樣式代碼的系統，用戶設置操作模塊，所述操作模塊用于用戶編輯元素和設置參數，設置參數后生成預覽模塊，預覽模塊用于預覽效果，通過JS代碼生成對應的代碼模塊。

進一步的，在操作模塊中用戶選擇預設元素,對預設元素進行操作,設置操作模塊中具體參數,生成預覽效果,是否符合預期效果,若符合預期效果,則生成對應的CSS代碼,復制代碼到項目；

若不符合預期效果，則修改對應項的參數。

進一步的，在操作模塊中包括文本子模塊、背景子模塊、位置子模塊、陰影子模塊、元素大小子模塊、邊框子模塊、CSS3變形子模塊和CSS3動畫子模塊；

所述文本子模塊用于設置當前HTML元素的文本信息；

所述背景子模塊用于設置背景顏色；

所述位置子模塊用于設置當前元素的長寬；

所述陰影子模塊用于展示CSS3中的陰影效果；

所述元素大小子模塊用于輸入框中手動設置元素的長和寬數值；

所述邊框子模塊用于設置元素的邊框及圓角；

所述CSS3變形子模塊用于設置元素的變形效果；

所述CSS3動畫子模塊用于為元素設置動畫效果。

進一步的，文本子模塊中文本信息包括內置文本內容、字體大小和字體樣式，用戶點擊其中一項進行操作后，根據用戶的設置，自動為左側的HTML元素設置對應的CSS效果供用戶查看是否符合預期。

進一步的，背景子模塊中用戶選擇背景顏色時，系統自動彈框展示顏色選擇器，用戶手動選擇顏色，確定顏色HEX值。

進一步的，在位置子模塊中還設置margin和padding值，用戶輸入具體值后，自動在預覽模塊生效，并生成對應代碼。

進一步的，陰影子模塊中有預設的陰影效果，點擊設置，進行效果預覽；

如果預設效果不符合要求，用戶進行調整，對陰影的顏色、模糊程度和內嵌方式進行設置。

進一步的，邊框子模塊中分別設置元素的四個邊框的寬度、顏色和樣式，或分別設置元素四個圓角大小。

進一步的，CSS3變形子模塊中手動輸入變形參數，任意調整3D旋轉角度，生成對應預覽效果。

進一步的，CSS3動畫子模塊對動畫名稱、時長、速度曲線和延遲參數進行設置；