Question

我试图制作旋转光线，但是当它旋转时你可以看到光线不是全屏，它左右有空白区域您可以在此处查看结果和代码：JSFiddle

<style>
  #me {
    -webkit-animation: rotation 5s infinite linear;
  }
  @-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
  }
  .win-boxx-container{ 
    z-index:1111111111111111111;  
    position: fixed; 
    width:100%; 
    height:100%; 
    background-size:100%; 
    left:0;
    top:0; 
    background: rgba(0, 0, 0, 0.75);
  }
  .win-lights-bg {
    width: 100%;   
    height: 100%; 
    left: 0%; 
    top: 0%; 
    left: -59%; 
    top: -57%; 
    position: absolute; 
    z-index:11111111111111111112; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: 810px -926px;
  }
  .win-boxx-box{
    position:absolute; 
    margin:auto; 
    background:url('images/win-boxx.png'); 
    background-size:100%; 
    background-repeat: no-repeat; 
    width: 572px;
    height: 337px; 
    text-align:center; 
    margin: auto; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index:1111111111111111111123;
  }
  .centering{
    text-align:center;
  }
  body{
    position:fixed;
  }
  @media all and (max-width: 1000px) and (min-width: 520px) {
    .win-boxx-box{
        width: 352px;
        height: 227px;
    }
    .win-boxx-stars{
        width: 50%;
    }
  }
  @media all and (max-width: 550px) and (min-width: 220px) {
    .win-boxx-box{
        width: 352px;
        height: 227px;
    }
    .win-boxx-stars{
      width: 50%;
    }
  }
  .win-lights-bg{
    width: 100%; 
    height: 100%; 
    left: 0; 
    top: 0; 
    position: absolute; 
    z-index: 0; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-position: 810px -926px;
  }
</style>

<div class="win-boxx-container" > 
  <img id="me" src="http://store1.up-00.com/2015-01/1421959145661.png" class="win-lights-bg"  />
</div>

Answer 1

你的代码中有很多重叠的，不必要的CSS。

我在这里做的是创建一个函数，根据当前窗口大小确定微调器的大小，并将其设置为vanilla js（javascript）。

<强> JSFIDDLE DEMO

脚本：

function setUpSpinner() {
    //get height and width and the spinning element and assign them to variables
    var height = window.innerHeight;
    var width = window.innerWidth;
    var winlightsbg = document.getElementsByClassName('win-lights-bg')[0];
    determine the largest and the adjustment factor (I used 1.5 to accomodate the corners when rotating - you may be able to finesse this a bit)
    var largest;
    if (height > width) {
        largest = height;
    } else {
        largest = width;
    }
    var adjust = largest * 1.5;
    //set up new height, width and offsets
    winlightsbg.style.height = adjust + "px";
    winlightsbg.style.width = adjust + "px";
    winlightsbg.style.left = -((adjust - largest) / 2) + "px";
    winlightsbg.style.top = -((adjust - largest) / 2) + "px";
}
//on page load run our spinner set up function once then bind it to the window resize event 
window.onload = function() {
    setUpSpinner();
    window.addEventListener('resize', setUpSpinner, false);
};

CSS：

.win-lights-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index:100;
}

整页旋转光线

1 个答案: