html - 旋转动画只渲染元素的一半
问题描述
我正在尝试为旋转的金色光线设置动画,下图是使用 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)
}
.winners-intro .winners-light .light:nth-child(2) {
transform: skewX(30deg)
}
.winners-intro .winners-light .light:nth-child(2),
.winners-intro .winners-light .light:nth-child(3) {
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)
}
.winners-intro .winners-light .light:nth-child(3) {
transform: skewX(60deg)
}
.winners-intro .winners-light .light:nth-child(4) {
transform: skewX(90deg)
}
.winners-intro .winners-light .light:nth-child(4),
.winners-intro .winners-light .light:nth-child(6) {
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)
}
.winners-intro .winners-light .light:nth-child(6) {
transform: skewX(-30deg)
}
.winners-intro .winners-light .light:nth-child(7) {
transform: skewX(-60deg);
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)
}
.winners-intro .winners-light .light:nth-child(8) {
width: 100%!important;
height: 10px!important;
background: transparent;
background: -webkit-linear-gradient(left, transparent 10%, gold 50%, transparent 90%, transparent);
background: linear-gradient(90deg, transparent 10%, gold 50%, transparent 90%, transparent)
}
.winners-intro .winners-trophy {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10
}
@-webkit-keyframes winners_light {
to {
transform: rotate(-1turn)
}
}
@keyframes clouds {
to {
transform: rotate(-1turn)
}
}
<div class="winners-intro">
<div>
<div class="winners-light">
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="radial-light"></div>
</div>
</div>
</div>
解决方案
我会简化代码,如下所示,您不会遇到问题:
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>
推荐阅读
- java - 数组列表位置和媒体播放器按钮下一个错误
- javascript - 如何在 jQuery 3 中编写 $.fn.functionName = (function() {
- python-3.x - 为什么 PeeWee 引用表名?
- ios - Xamarin 表单绑定 Webview 在 Android 上显示,但不在 IOS 上从等待的任务中显示
- node.js - NodeJS - 同步逐行读取缓冲区=> toString()失败
- java - RxJava 中 VertX CompositeFuture 的等价物
- odoo - 计算选择字段不起作用
- spring - Spring Security 5 身份验证总是返回 302
- android - AAPT2 错误:检查日志以获取详细信息(构建失败)
- c# - 在 WCF 中的客户端处理故障服务通道