你不知道的box shadow

2021-08-07 03:38:20 字數 1341 閱讀 1297

我們可以僅使用乙個div利用shadow配合animation實現很多豐富的效果~

github: 

(~\(≧▽≦)/~    求★)

必需。水平陰影的位置。允許負值。

v-shadow

必需。垂直陰影的位置。允許負值。

blur

可選。模糊距離。

spread

可選。陰影的尺寸。

color

可選。陰影的顏色。請參閱 css 顏色值。

inset

可選。將外部陰影 (outset) 改為內部陰影。

這個是其屬性值,不過在w3c上對於box-shaow的介紹,可能很少有人認真看一下:box-shadow 屬性向框新增乙個或多個陰影

我們在新增多個陰影的時候用逗號隔開就行;

這裡需要注意的是我們的div就是我們的小球「模板」,我們這裡需要把它隱藏起來,也就是把它背景設定成白色,三個小球分別是它的陰影,經過水平平移出來的;對於小球的動作,我們再利用anmation來完成即可,不過這裡需要注意的就是不要對div進行設定,因為3個陰影的位置是相對於這個div設定的,所以我們的div位置要保持不變;

animation:

animation-name

規定需要繫結到選擇器的 keyframe 名稱。。

animation-duration

規定完成動畫所花費的時間,以秒或毫秒計。

animation-timing-function

規定動畫的速度曲線。

animation-delay

規定在動畫開始之前的延遲。

animation-iteration-count

animation-direction

還可以自由發揮,例如做動態內切圓哦~

今天用獵豹清理軟體的時候發現手機上在掃瞄檔案的時候的等待圖示也可以用這個做

不知道不知道

函式分析 希爾伯特 哥德爾不完備定理 哥德爾不完全性定理一舉粉碎了數學家兩千年來的信念。他告訴我們,真與可證是兩個概念。可證的一定是真的,但真的不一定可證。某種意義上,悖論的陰影將永遠伴隨著我們。無怪乎大數學家外爾發出這樣的感嘆 上帝是存在的,因為數學無疑是相容的 魔鬼也是存在的,因為我們不能證明這...

不知道不知道

函式分析 希爾伯特 哥德爾不完備定理 哥德爾不完全性定理一舉粉碎了數學家兩千年來的信念。他告訴我們,真與可證是兩個概念。可證的一定是真的,但真的不一定可證。某種意義上,悖論的陰影將永遠伴隨著我們。無怪乎大數學家外爾發出這樣的感嘆 上帝是存在的,因為數學無疑是相容的 魔鬼也是存在的,因為我們不能證明這...

你不知道的 和

開發中,編寫有一定逼格的 是每個程式猿都追求的。經常用來判斷的符號 和 也經常用來定義變數哦,你知道嗎?邏輯與 在有乙個運算元不是布林值的情況下,就不一定返回布林值。比如以下情況 1 第乙個運算元是物件,返回第二個數 var myinfo console.log myinfo 2 輸出22 第二個運...