雪花代码
动画效果
代码
< ! DOCTYPE html> < html> < head> < style> body { background- color: #000000 ; } . snowflake { position : absolute; font- size: 10px; color : #FFFFFF ; text- shadow: 1px 1px 1px #000000 ; user- select: none; } < / style> < / head> < body> < script> function random ( min, max ) { return Math. floor ( Math. random ( ) * ( max - min + 1 ) ) + min; } function Snowflake ( ) { this . characters = "❄️" ; this . x = random ( 0 , window. innerWidth) ; this . y = random ( - 200 , - 100 ) ; this . speed = random ( 1 , 5 ) ; this . element = document. createElement ( "span" ) ; this . element. classList. add ( "snowflake" ) ; this . element. innerHTML = this . characters; document. body. appendChild ( this . element) ; } Snowflake . prototype. update = function ( ) { this . y += this . speed; this . element. style. top = this . y + "px" ; this . element. style. left = this . x + "px" ; if ( this . y > window. innerHeight) { this . y = random ( - 200 , - 100 ) ; this . x = random ( 0 , window. innerWidth) ; } } ; var snowflakes = [ ] ; for ( var i = 0 ; i < 100 ; i++ ) { snowflakes. push ( new Snowflake ( ) ) ; } setInterval ( function ( ) { snowflakes. forEach ( function ( snowflake ) { snowflake. update ( ) ; } ) ; } , 50 ) ; < / script> < / body> < / html>