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

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 {&nbsp; background: #ededed;&nbsp; margin:0;&nbsp; overflow:hidden;&nbsp; display:flex;&nbsp; align-items:center;&nbsp; justify-content:center;&nbsp; height:100vh;}.light {&nbsp; height: 100vmax;&nbsp; width:100vmax;&nbsp; background:&nbsp;&nbsp; &nbsp; &nbsp; radial-gradient(circle ,rgba(255, 215, 0, 1 ) 8vmax,transparent 8vmax),&nbsp; &nbsp; &nbsp; radial-gradient(circle ,rgba(255, 215, 0, 0.6)8vmax,transparent 17vmax),&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; linear-gradient(to bottom, transparent 10%,gold,transparent 90%) center/10px 100%,&nbsp; &nbsp; &nbsp; linear-gradient(to right , transparent 10%,gold,transparent 90%) center/100% 10px;&nbsp; &nbsp;background-repeat:no-repeat;&nbsp; &nbsp;position:relative;&nbsp; &nbsp;overflow:hidden;&nbsp; &nbsp;animation:move 5s linear infinite;}.light:before,.light:after{&nbsp; &nbsp;content:"";&nbsp; &nbsp;position:absolute;&nbsp; &nbsp;top:0;&nbsp; &nbsp;left:0;&nbsp; &nbsp;right:0;&nbsp; &nbsp;bottom:0;&nbsp; &nbsp;background:inherit;&nbsp; &nbsp;background-size:0 0,0 0,10px 100%,100% 10px;&nbsp; &nbsp;transform:rotate(30deg);}.light:after{&nbsp; &nbsp;transform:rotate(-30deg);}@keyframes move {&nbsp; to {&nbsp; &nbsp; transform:rotate(1turn);&nbsp; }}<div class="light"></div>