从页面中心开始不断增长的“爆炸”光照动画
从页面中心开始不断增长的“爆炸”光照动画
提问于 2019-10-31 06:58:46
使用CSS，我想用动画的径向渐变圆来扩展整个页面的长度和宽度(全白)，然后反转这个动画(返回到原始状态)。这应该看起来像是从中心开始逐渐“爆炸”的白色，一旦达到全宽/全高，就会逐渐淡出到完全白色，但是我的白色背景过早地开始过渡。我该如何实现这一点？
scss
.container {
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
background: black;
height: 100vh;
}
.flash-container {
animation: grow 5s 2s linear forwards;
width: 20px;
height: 20px;
z-index: 4;
#flash {
background: radial-gradient(circle, white, transparent 10%);
width: 100%;
height: 100%;
position: absolute;
border-radius: 100%;
}
}
@keyframes grow {
to {
transform: scale(1000);
background: white;
}
}html
<div class="container">
<div class="flash-container">
<div class="flash"></div>
</div>
</div>Jsfiddle：https://jsfiddle.net/zv3bmw8j/2/
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-10-31 07:25:59
我更新了你的CSS来使用我上面引用的方框阴影方法。这将需要更多的调整，因为它是在悬停方法上构建的。只需将百分比值从0% - 100%更改，您就应该是可靠的。我还更改了HTML格式，并删除了内部的flash div。
https://jsfiddle.net/q9n6adLp/
.flash-container {
animation: grow 5s 2s linear forwards;
width: 20px;
height: 20px;
z-index: 4;
margin: 0 auto;
box-shadow: 0 0 30vw 40vw rgba(241,244,0,1);
.flash {
background: radial-gradient(circle, white, transparent 10%);
width: 100%;
height: 100%;
position: absolute;
border-radius: 100%;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58634746
复制相关文章
相似问题
腾讯云开发者
