實(shí)現(xiàn)思路使用box-shadow屬性寫幾個(gè)圓，將這些圓錯(cuò)落的組合在一起，形成云朵圖案after偽元素寫下面的投影樣式before偽元素寫黃色閃電的樣式dom結(jié)構(gòu)用" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > web前端入門到實(shí)戰(zhàn)：純CSS制作電閃雷鳴的天氣圖標(biāo)

web前端入門到實(shí)戰(zhàn)：純CSS制作電閃雷鳴的天氣圖標(biāo)

時(shí)間：2023-07-03 15:09:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-03 15:09:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

web前端入門到實(shí)戰(zhàn)：純CSS制作電閃雷鳴的天氣圖標(biāo)：

效果

效果圖如下







實(shí)現(xiàn)思路

  1. 使用box-shadow屬性寫幾個(gè)圓，將這些圓錯(cuò)落的組合在一起，形成云朵圖案
  2. after偽元素寫下面的投影樣式
  3. before偽元素寫黃色閃電的樣式

dom結(jié)構(gòu)

用兩個(gè)嵌套的div容器就可以了，父容器來(lái)控制圖標(biāo)顯示的位置，子容器用來(lái)寫烏云的樣式。而陰影和閃電的樣式都用偽元素就可以了，這些都是在css中定義的。

<div class="container"> <div class="stormy"></div></div>

css樣式

css按照步驟來(lái)實(shí)現(xiàn)
1、先寫父容器樣式，順便給整個(gè)頁(yè)面加個(gè)背景色，方便預(yù)覽

body{ background: rgba(73,74,95,1);}.container{ width: 170px; height: 170px; position: relative; margin: 250px auto;}2、寫烏云的樣式，別忘了烏云有一個(gè)上下移動(dòng)的動(dòng)畫效果

.stormy{ width: 50px; height: 50px; position: absolute; left: 80px; top: 70px; margin-left: -60px; background: #222; border-radius: 50%; box-shadow: #222 64px -15px 0 -5px, #222 25px -25px, #222 30px 10px, #222 60px 15px 0 -10px, #222 85px 5px 0 -5px; animation: stormy 5s ease-in-out infinite;}@keyframes stormy{ 50%{ transform: translateY(-20px); }}3、陰影樣式，同樣是有動(dòng)畫的

.stormy::after{ content: ''; width: 120px; height: 15px; position: absolute; left: 5px; bottom: -60px; background: #000; border-radius: 50%; opacity: 0.2; transform: scale(0.7); animation: stormy_shadow 5s ease-in-out infinite;}@keyframes stormy_shadow{ 50%{ transform: translateY(20px) scale(1); opacity: 0.05; }}4、閃電樣式

.stormy::before{ display: block; content: ''; width: 0; height: 0; position: absolute; left: 57px; top: 70px; border-left: 0px solid transparent; border-right: 7px solid transparent; border-top: 43px solid yellow; box-shadow: yellow -7px -32px; transform: rotate(14deg); transform-origin: 50% -60px; animation: stormy_thunder 2s steps(1, end) infinite;}@keyframes stormy_thunder{ 0%{ transform: rotate(20deg); opacity: 1; } 5%{ transform: rotate(-34deg); opacity: 1; } 10%{ transform: rotate(0deg); opacity: 1; } 15%{ transform: rotate(-34deg); opacity: 0; }}OK，搞定。按著步驟來(lái)，你也可以在你的頁(yè)面上實(shí)現(xiàn)酷炫的電閃雷鳴天氣圖標(biāo)咯~

實(shí)戰(zhàn)操作代碼解析，大型互聯(lián)網(wǎng)web前端實(shí)戰(zhàn)操作，學(xué)習(xí)指導(dǎo)，學(xué)習(xí)資源

點(diǎn)：【W(wǎng)EB前端資源】

關(guān)鍵詞：入門,實(shí)戰(zhàn)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉