我正在嘗試為旋轉的金色光線設置動畫，下圖是使用 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)}
1 回答
MYYA
TA貢獻1868條經驗 獲得超4個贊
我會像下面這樣簡化代碼，這樣您就不會遇到問題：
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>
- 1 回答
- 0 關注
- 105 瀏覽
添加回答
舉報
0/150
提交
取消