Question

如何使用瓷砖中的重复图像填充网站，就像background-repeat: repeat;一样，并使用CSS或Javascript进行旋转？

要旋转单个图像，我可以使用CSS：

@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(360deg); }
}

@-ms-keyframes spin {
    from { -ms-transform: rotate(0deg); }
    to { -ms-transform: rotate(360deg); }
}                                               

img#id {                                            
    -webkit-animation-name:             spin;  
    -webkit-animation-duration:         5s;    
    -webkit-animation-iteration-count:  infinite;
    -webkit-animation-timing-function:  linear;  
    -moz-animation-name:                spin;  
    -moz-animation-duration:            5s;    
    -moz-animation-iteration-count:     infinite;
    -moz-animation-timing-function:     linear; 
    -ms-animation-name:                 spin;  
    -ms-animation-duration:             5s;    
    -ms-animation-iteration-count:      infinite;
    -ms-animation-timing-function:      linear; 
}

但我无法告诉我如何对重复的图像执行此操作，即将背景图像作为元素访问或重复<img>并使用给定图像填充整个页面，如background-repeat。

Here是旋转单张图像的一个例子。

Answer 1

根据你的要求我做了类似的事情，虽然我认为这是一个糟糕的选择，它可以做得更好......

------- 更新 ------- 好吧，我让代码更清洁......

jsFiddle Demo updated

(function () {
    var left = 0,
        top = 0,
        background = document.getElementById("background"),
        getWidth = document.width,
        getHeight = document.height,
        imageSize = 240,
        width = 960,
        height = 960,
        countPerLine = 4,
        countOfImages = 16,
        difference = 0;

    function setParameters() {
        if (getWidth > width) {
            width = getWidth;
            countPerLine = Math.floor(getWidth / imageSize);
            difference = getWidth % imageSize;
            imageSize += Math.round(difference / countPerLine);
        }
        if (getHeight > height) {
            countOfImages = Math.floor(getHeight / imageSize);
            countOfImages *= countPerLine;
        }
    }

    function setBackground() {
        for (var i = 0; i < countOfImages; i++) {
            var div = document.createElement("div");

            div.classList.add("bgr");
            div.style.width = imageSize + "px";
            div.style.height = imageSize + "px";
            div.style.backgroundSize = "100% 100%";
            background.appendChild(div);

            if (i === 0) {
                div.style.left = "0px";
                div.style.top = "0px";
            } else {
                left += imageSize;
                if (left >= width) {
                    left = 0;
                    top += imageSize;
                }
                div.style.left = left + "px";
                div.style.top = top + "px";
            }
        }
    }

    setParameters();
    setBackground();
}());

在图块中重复图像，然后旋转

1 个答案: