Log Cabin Window Glow的CSS動畫

我正在製作聖誕主題的網站，我想做一個小木屋風格的村莊。這個功能的主要特點是可以從駕駛室窗戶看到燈光。Log Cabin Window Glow的CSS動畫

我只想問問任何人有使用CSS製作逼真的發光效果的經驗嗎？

我目前的一個例子簡單變淡橙色塊進出，但我認爲這可能將作出看起來更加大氣，我敢肯定有製作好的發光效果，有人可以共享一個很棒的技巧..

實施例： http://codepen.io/Jambob/pen/epMrBp

.animated { 
    -webkit-animation-duration: 7s; 
    animation-duration: 7s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: ease-in-out; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count:infinite; 
    -webkit-animation-iteration-count:infinite; 
} 

@-webkit-keyframes flash { 
    0%, 50%, 100% {opacity: .80;} 
    25%, 75% {opacity: 0.25;} 
} 
@keyframes flash { 
    0%, 50%, 100% {opacity: .80;} 
    25%, 75% {opacity: 0.25;} 
} 
.flash { 
    -webkit-animation-name: flash; 
    animation-name: flash; 
}

實施例的燈： http://www.netanimations.net/deer-stream-cabin-snow-winter-animation.gif

來源

2015-10-26 James

你試過使用'box-shadow'屬性嗎？根據您的目標瀏覽器，您可以使用css動畫淡入/淡出（我無法在我的公司網絡上加載您的測試網站，以瞭解您迄今爲止做了些什麼，也許jsfiddle會很好） –

http： //codepen.io/Jambob/pen/epMrBp – James

http://codepen.io/anon/pen/LpdmbL添加了'box-shadow'使用示例，稍微修圓邊緣以獲得更柔和的外觀並提高動畫速度，同時減少不同的國家給予更多的「從火裏面閃爍」的感覺。希望能讓你走上正確的道路。 –

將我們上面的討論總結爲一個答案，因爲我認爲這可以實現您想要的一切。

Animate box-shadow從窗口創建初始閃爍發光。爲了從窗口射出的光線射出到雪地上，實際上需要兩個三角形，一個從窗口的底部邊緣延伸，另一個從右邊緣延伸，連接在一起以創建一個形狀。

您可以使用零寬度/高度div創建這些三角形，並在兩側分配一個邊框（在其他地方有詳細記錄，可以使用搜索或使用像http://triangle.designyourcode.io/這樣的生成器）。

CodePen：http://codepen.io/anon/pen/ZbxRQy（我已經做了第一雙三角射線你，左邊第二個窗口作爲一個練習，可以讓你瞭解自己的技術我也用::before和::after僞元素的三角形保持DOM小，雖然你可以同樣使用div s）

來源

2015-10-26 13:33:39

應該三角發光沒有比機艙高的Z指數嗎？感謝您的幫助 – James

不客氣。子元素z索引是相對於父母計算的。換句話說，你不需要設置它們，因爲它們已經在艙室之上了。（剛纔注意到有一個BG圖像，它不會顯示出來，因爲它在我的公司的防火牆阻止的域中）。所以是的，z-indexes需要設置爲高於'＃cabin' div，但是你是否需要該div的z-index呢？ –

剛剛訪問您的網站，我可以看到你現在的意思。在這種情況下，三角形需要是單獨的元素。目前，由於它們是需要在機艙後面的窗格的子元素，因此無論您設置z-索引有多高，都不能將它們帶到機艙前面（因爲它們僅限於父母的堆疊環境） –

Log Cabin Window Glow的CSS動畫

回答

相關問題