如何用純 CSS 繪製一顆閃閃發光的璀璨鑽石

2022-07-04 13:27:10 字數 819 閱讀 8919

按下右側的「點選預覽」按鈕在當前頁面預覽，點選鏈結全屏預覽。

請用 chrome, safari, edge 開啟**。

定義 dom，容器中包含乙個元素：
居中顯示：

html,


body
畫出第一組刻面的形狀：

.diamond 


.diamond span
為第一組刻面上色，因為後面還要用到這些色值，所以定義了變數：

:root 


.diamond span
dom容器 中再增加3組刻面：
把4組刻面先組成田字格，再轉換成鑽石形狀：

.diamond 


.diamond span:first-child
定義動畫效果：

@keyframes animate 


25% 


50% 


75% 


100% 


}
最後，把動畫效果應用到除第1組以外的刻面上：

.diamond span:not(:first-child)
大功告成！

純CSS3實現閃閃發光的動畫

這個效果的具體實現主要是用到了css3 的animation 它共有8個屬性 animation name 規定 keyframes 動畫的名稱。用來定義乙個動畫的名稱。如果要設定幾個animation給乙個元素，我們只需要以列表的形式，用逗號 隔開 animation duration 動畫時長 ...

如何用純 CSS 創作一顆逼真的土星

按下右側的 點選預覽 按鈕可以在當前頁面預覽，點選鏈結可以全屏預覽。請用 chrome,safari,edge 開啟 定義 dom，容器本身表示土星星球，其中的ring元素表示土星環 居中顯示 body定義容器尺寸 saturn畫出土星星球 此為草稿，後面還會細化 saturn saturn bef...

純css畫一顆跳動的心

1.transition property 執行變換的屬性 2.transition duration 執行變換的時間 3.transition time function 執行變換的速率 4.transition delay 執行變換的延遲時間。1.animation name 規定需要繫結到選擇...