1

background-repeat: repeat;CSS や Javascript を使用して Web サイトをタイル状に繰り返し画像で塗りつぶし、回転させるにはどうすればよいですか?

単一の画像を回転するには、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; 
}

しかし、繰り返しの画像に対してこれを行う方法がわかりません。つまり、要素として background-image にアクセスするか、 a を繰り返して、<img>ページ全体を のような特定の画像で埋めますbackground-repeat。

回転する単一の画像の例を次に示します。

4

1 に答える 1

1

あなたの要件に基づいて、私はこのようなことをしましたが、それは悪いオプションだと思いますが、はるかにうまくいく可能性があります...

-------更新------- さて、私はコードをよりきれいにします...

jsFiddle デモが更新されました

(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();
}());
于 2013-04-10T23:14:43.157 に答える