javascript - 添加新元素时如何锁定滚动选项不消耗?(没有溢出:隐藏)
问题描述
我找到了我想使用的这个很酷的烟花 CSS - https://codepen.io/yshlin/pen/ylDEk
CSS:
body {
margin:0;
padding:0;
background: #000;
overflow: hidden;
}
$particles: 50;
$width: 500;
$height: 500;
// Create the explosion...
$box-shadow: ();
$box-shadow2: ();
@for $i from 0 through $particles {
$box-shadow: $box-shadow,
random($width)-$width / 2 + px
random($height)-$height / 1.2 + px
hsl(random(360), 100, 50);
$box-shadow2: $box-shadow2, 0 0 #fff
}
@mixin keyframes ($animationName) {
@-webkit-keyframes #{$animationName} {
@content;
}
@-moz-keyframes #{$animationName} {
@content;
}
@-o-keyframes #{$animationName} {
@content;
}
@-ms-keyframes #{$animationName} {
@content;
}
@keyframes #{$animationName} {
@content;
}
}
@mixin animation-delay ($settings) {
-moz-animation-delay: $settings;
-webkit-animation-delay: $settings;
-o-animation-delay: $settings;
-ms-animation-delay: $settings;
animation-delay: $settings;
}
@mixin animation-duration ($settings) {
-moz-animation-duration: $settings;
-webkit-animation-duration: $settings;
-o-animation-duration: $settings;
-ms-animation-duration: $settings;
animation-duration: $settings;
}
@mixin animation ($settings) {
-moz-animation: $settings;
-webkit-animation: $settings;
-o-animation: $settings;
-ms-animation: $settings;
animation: $settings;
}
@mixin transform ($settings) {
transform: $settings;
-moz-transform: $settings;
-webkit-transform: $settings;
-o-transform: $settings;
-ms-transform: $settings;
}
.pyro > .before, .pyro > .after {
position: absolute;
width: 5px;
height: 5px;
border-radius: 50%;
box-shadow: $box-shadow2;
@include animation((1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards));
}
.pyro > .after {
@include animation-delay((1.25s, 1.25s, 1.25s));
@include animation-duration((1.25s, 1.25s, 6.25s));
}
@include keyframes(bang) {
to {
box-shadow:$box-shadow;
}
}
@include keyframes(gravity) {
to {
@include transform(translateY(200px));
opacity: 0;
}
}
@include keyframes(position) {
0%, 19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%, 39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%, 59.9% {
margin-top: 20%;
margin-left: 70%
}
60%, 79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%, 99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
<div class="pyro">
<div class="before"></div>
<div class="after"></div>
</div>
那么有没有办法“锁定 Y 轴”大小或将烟花“排除在流中”而不让它们扩大视野?
解决方案
这个片段试图简化事情,它将 CSS 归结为纯 CSS(无 SCSS)并删除了预先修复,以便更容易看到正在发生的事情。它还删除了两个内部 div,用 pyro 上的伪元素替换它们。这样,该类可以在任何 div 上使用以提供烟花背景。
div 被赋予绝对定位并且溢出被隐藏。这似乎可以解决问题。
body {
margin: 0;
padding: 0;
background: #000;
}
.pyro, .pyro::before, .pyro::after {
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.pyro {
background: black;
width: 100vw;
height: 100vh;
}
.pyro::before, .pyro::after {
content: '';
z-index: 1;
width: 5px;
height: 5px;
border-radius: 50%;
box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
}
.pyro::after {
overflow-y: hidden;
animation-delay: 1.25s, 1.25s, 1.25s;
animation-duration: 1.25s, 1.25s, 6.25s;
}
@keyframes bang {
to {
box-shadow: 64px -324.6666666667px #ff000d, 185px -323.6666666667px #e1ff00, 238px -411.6666666667px #00ff0d, 55px -50.6666666667px #00ffb3, 113px 74.3333333333px #bb00ff, -72px -118.6666666667px #ff0037, -12px -63.6666666667px #ff00d0, -141px 11.3333333333px #00ff48, -155px -71.6666666667px #eaff00, -52px -22.6666666667px #0004ff, -178px -365.6666666667px #2fff00, -82px -307.6666666667px #00ff73, 224px -107.6666666667px #ffbb00, -200px -346.6666666667px #f200ff, 114px -182.6666666667px #ff00a6, -184px -307.6666666667px #006fff, -213px -413.6666666667px #ff2600, 103px -256.6666666667px #ff0015, -190px -266.6666666667px #ff00ee, 22px -169.6666666667px #ff002f, 87px -411.6666666667px #48ff00, -238px -200.6666666667px #ff0073, 242px 46.3333333333px #fb00ff, -119px 72.3333333333px #eaff00, -222px -197.6666666667px #00ff33, -137px -360.6666666667px #ff00f2, 215px -274.6666666667px #ff9100, -16px -384.6666666667px #0062ff, 208px -107.6666666667px #ff0d00, -232px -333.6666666667px #00d0ff, -150px -293.6666666667px #00ff3c, 170px -144.6666666667px #26ff00, -184px 60.3333333333px #aaff00, 37px -229.6666666667px #ff0044, -116px -368.6666666667px #ffaa00, 66px -171.6666666667px #33ff00, 201px 43.3333333333px #ff3c00, 45px 9.3333333333px #00ff51, -10px 76.3333333333px #0077ff, 134px 31.3333333333px #ff00d0, -204px 41.3333333333px #bb00ff, -94px -231.6666666667px #aeff00, -2px 57.3333333333px #f700ff, -213px -180.6666666667px #ff0055, 198px -348.6666666667px #6fff00, 43px -351.6666666667px #c800ff, -89px 9.3333333333px #b300ff, 31px 77.3333333333px #ff0059, -194px -258.6666666667px #00ff4d, -213px -265.6666666667px #15ff00, -249px -322.6666666667px #002bff;
}
}
@keyframes gravity {
to {
transform: translateY(200px);
opacity: 0;
}
}
@keyframes position {
0%, 19.9% {
margin-top: 10%;
margin-left: 40%;
}
20%, 39.9% {
margin-top: 40%;
margin-left: 30%;
}
40%, 59.9% {
margin-top: 20%;
margin-left: 70%;
}
60%, 79.9% {
margin-top: 30%;
margin-left: 20%;
}
80%, 99.9% {
margin-top: 30%;
margin-left: 80%;
}
}
<div class="pyro"></div>
推荐阅读
- bash - 嵌套的 herodoc 操作顺序
- java - 读取带有 DOCTYPE SYSTEM ".dtd" 错误的 xml 文件
- docker - 创建一个 1 小时后自动退出的 docker 容器
- reporting-services - 停止 ReportServer 执行日志 删除
- git - 如何修复此错误“错误:RPC 失败;curl 92 HTTP/2 流 0 未完全关闭:CANCEL (err 8)”
- multithreading - 在 docker 容器中运行具有多个进程的应用程序
- python - LSTM 神经网络、密集层单元的问题
- javascript - 如何使用 react-step-builder 调用下一个视图函数?
- python - django关于deleteview和view
- javascript - PHP - 更改 PDF 画布时更新显示的信息