                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /H5+JS+CSS3實現七夕言情

visualWidth和visualHeight是怎么來的？？為什么沒有效果

<!DOCTYPE html>
<html lang="en">
<head>
? ?<meta charset="UTF-8">
? ?<title>Document</title>
? ?<style type="text/css">
#snowflake {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
? ?}
? ?
? ?.snowRoll {
position: absolute;
opacity: 0;
-webkit-animation-name: mysnow;
-webkit-animation-duration: 20s;
-moz-animation-name: mysnow;
-moz-animation-duration: 20s;
height: 80px
}
? ?
@-webkit-keyframes mysnow {
0% {
bottom: 100%
? ? ? ?}
50% {
-webkit-transform: rotate(1080deg)
? ? ? ?}
100% {
-webkit-transform: rotate(0deg) translate3d(50px, 50px, 50px)
? ? ? ?}
? ?}
? ?
@-moz-keyframes mysnow {
0% {
bottom: 100%
? ? ? ?}
50% {
-moz-transform: rotate(1080deg)
? ? ? ?}
100% {
-moz-transform: rotate(0deg) translate3d(50px, 50px, 50px)
? ? ? ?}
? ?}
</style>
</head>

<body>

? ? ? ?<button>開始飄花</button>

? ?<div id="snowflake"></div>
? ?<script src="jquery-3.0.0.min.js"></script>
? ?<script>
$(function() {
var snowflakeURl = [
'images/1.png',
'images/2.png',
'images/3.png',
'images/4.png',
'images/5.png',
'images/6.png'
];

function snowflake() {

var box = $("#snowflake");

function getImagesName() {
return snowflakeURl[[Math.floor(Math.random() * 6)]];
? ? ? ? ? ?}

function createSnowBox() {
var url = getImagesName();
return $('<div />').css({
'width': 41,
'height': 41,
'position': 'absolute',
'backgroundSize': 'cover',
'zIndex': 100000,
'top': '-41px',
'backgroundImage': 'url(' + url + ')'
}).addClass('snowRoll');
? ? ? ? ? ?}

setInterval(function() {
// 運動的軌跡
var startPositionLeft = Math.random() * visualWidth - 100,
startOpacity = 1,
endPositionTop = visualHeight - 40,
endPositionLeft = startPositionLeft - 100 + Math.random() * 500,
duration = visualHeight * 10 + Math.random() * 5000;

// 隨機透明度，不小于0.5
var randomStart = Math.random();
randomStart = randomStart < 0.5 ? startOpacity : randomStart;

// 創建一個雪花
var $flake = createSnowBox();

// 設計起點位置
$flake.css({
left: startPositionLeft,
opacity: randomStart
});

// 加入到容器
box.append($flake);

// 開始執行動畫
$flake.transition({
top: endPositionTop,
left: endPositionLeft,
opacity: 0.7
}, duration, 'ease-out', function() {
$(this).remove(); //結束后刪除
});

? ? ? ? ? ?}, 200);
? ? ? ?}

$("button").click(function() {
snowflake();
console.log(createSnowBox);
? ? ? ?});
? ?});
</script>
</body>

</html>