2014-12-05 10 views
-1

是否有可能使我的網站上的雪影響,而不使用任何形式的JS,但使用HTML5呢?雪的影響與出來JS

我知道這聽起來很奇怪,但我不能在網站上使用JS(不要問,不想解釋),所以可能嗎?

謝謝

+0

應該是可能的 – Hacketo 2014-12-05 08:53:52

回答

4

是的,你可以。

這裏是example of snow只有css3。

標記:

<div id="snow"> 
</div> 

和CSS:

body { background-color:#333; } 
#snow{ 
    background: none; 
    font-family: Androgyne; 
    background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png'); 
    height: 100%; 
    left: 0; 
    position: absolute; 
    top: 0; 
    width: 100%; 
    z-index:1; 
    -webkit-animation: snow 10s linear infinite; 
    -moz-animation: snow 10s linear infinite; 
    -ms-animation: snow 10s linear infinite; 
    animation: snow 10s linear infinite; 
} 
@keyframes snow { 
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 
    100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} 
} 
@-moz-keyframes snow { 
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 
    100% {background-position: 400px 1000px, 200px 400px, 100px 300px;} 
} 
@-webkit-keyframes snow { 
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 
    100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} 
} 
@-ms-keyframes snow { 
    0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 
    50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 
    100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} 
} 

無論如何,有很多的解決方案。爲什麼不只是谷歌它(想象imgtfy鏈接在這裏,禁止通過stackoverflow)

+0

非常感謝!我做了谷歌它,每次我結束了一個使用js。 – 2014-12-05 08:58:48

3

是的,這是可能的。

這是你可以得到這樣一個問題的最佳答案。