旋转动画仅渲染元素的一半

Question

我正在尝试为旋转的金色光线设置动画，下图是使用 html 和 css 实现的布局，但是当我尝试添加旋转动画时，布局似乎被削减了一半。下面的代码片段是我的尝试。非常感谢任何帮助、想法。@import('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css');body {    background: #ededed;    padding: 64px 0;    font-family: Roboto, sans-serif;    font-size: 12px}.banner {    max-width: 100%;    max-height: 100%;    -webkit-box-shadow: 0 10px 40px -6px rgba(0, 0, 0, .1);    -moz-box-shadow: 0 10px 40px -6px rgba(0, 0, 0, .1);    -o-box-shadow: 0 10px 40px -6px rgba(0, 0, 0, .1);    box-shadow: 0 10px 40px -6px rgba(0, 0, 0, .1)}.winners-intro {    background: #ededed;    z-index: 999}.winners-intro,.winners-intro .winners-light {    display: flex;    align-items: center;    justify-content: center;    width: 100%;    height: 100vh;    position: fixed;    top: 0;    left: 0}.winners-intro .winners-light {    -webkit-animation-name: winners_light;    -webkit-animation-duration: 10s;    -webkit-animation-iteration-count: infinite;    animation-name: winners_light;    animation-duration: 10s;    animation-iteration-count: infinite}.winners-intro .winners-light .radial-light {    width: 100px;    height: 100px;    background: gold;    box-shadow: 1px 1px 100px 50px gold;    -webkit-box-shadow: 1px 1px 100px 50px gold;    -moz-box-shadow: 1px 1px 100px 50px gold;    -o-box-shadow: 1px 1px 100px 50px gold;    -webkit-border-radius: 50%;    -moz-border-radius: 50%;    border-radius: 50%;    position: absolute}.winners-intro .winners-light .light {    position: absolute;    background: gold;    height: 200vh;    width: 20px;    opacity: .5;    background: transparent;    background: -webkit-linear-gradient(bottom, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent);    background: linear-gradient(0deg, transparent 27%, gold 50%, transparent 73%, transparent 90%, transparent)}

Answer 1

我会像下面这样简化代码，这样您就不会遇到问题：

body {

  background: #ededed;

  margin:0;

  overflow:hidden;

  display:flex;

  align-items:center;

  justify-content:center;

  height:100vh;

}

.light {

  height: 100vmax;

  width:100vmax;

  background: 

      radial-gradient(circle ,rgba(255, 215, 0, 1 ) 8vmax,transparent 8vmax),

      radial-gradient(circle ,rgba(255, 215, 0, 0.6)8vmax,transparent 17vmax),

      

      linear-gradient(to bottom, transparent 10%,gold,transparent 90%) center/10px 100%,

      linear-gradient(to right , transparent 10%,gold,transparent 90%) center/100% 10px;

   background-repeat:no-repeat;

   position:relative;

   overflow:hidden;

   animation:move 5s linear infinite;

}

.light:before,

.light:after{

   content:"";

   position:absolute;

   top:0;

   left:0;

   right:0;

   bottom:0;

   background:inherit;

   background-size:0 0,0 0,10px 100%,100% 10px;

   transform:rotate(30deg);

}

.light:after{

   transform:rotate(-30deg);

}

@keyframes move {

  to {

    transform:rotate(1turn);

  }

}

<div class="light"></div>