我仅使用 CSS 构建背景动画。我想要一些图像/颜色在无限循环中从左到右以相同的顺序移动。
它可以像我想要的那样使用下面的代码。但是我在移动设备上遇到了问题（在 Android 上测试了 Chrome 85.0.4183.127，在 Firefox Dev Tools 上测试了 iPhone 6/7/8 iOS 11），其中动画正在移动 Bootstrap 的导航栏切换器。
抱歉，代码太长，我无法用更少的代码重现它。
有任何想法吗？
$(document).ready(function() {
//stop animation
$(".play_animation").click(() => {
if ($(".backgroundAll").css("animation-play-state") == "paused") {
$(".backgroundAll").css("animation-play-state", "running");
$(".play_animation.fa-pause").css("display", "block");
$(".play_animation.fa-play").css("display", "none");
} else {
$(".backgroundAll").css("animation-play-state", "paused");
$(".play_animation.fa-pause").css("display", "none");
$(".play_animation.fa-play").css("display", "block");
}
});
});body,
html {
overflow-x: hidden;
}
.play_animation.fa-play {
display: none;
}
.backgroundAll {
position: absolute;
height: 100vh;
width: 100vw;
top: 0px;
background-size: cover;
background-position: center;
background-attachment: fixed;
opacity: 0.3; /* not fucking 30% due to fucking Safari (e.g. version 10.1.2) */
}
#background1 {
left: -100vw;
background-color: blue;
animation: bg_first 10s linear;
}
@keyframes bg_first {
from {
left: 0;
}
to {
left: 100vw;
}
}
#background2 {
left: -100vw;
background-color: red;
animation: bg_regular 20s linear infinite;
}
#background3 {
left: -100vw;
background-color: blue;
animation: bg_regular 20s linear 10s infinite;
}
/* add multiple backgrounds */
@keyframes bg_regular {
from {
left: -100vw;
}
to {
left: 100vw;
}
}
#content {
position: absolute;
left: 0px;
top: 0px;
width: 100vw;
padding: 15px;
}
.mtCustom {
margin-top: 63px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid bg-light">
<div id="nav" class="row bg-dark fixed-top">
<div class="col-12">
<nav class="navbar navbar-expand-md bg-dark navbar-dark h5">
<a class="navbar-brand my-n3 pt-3" href="">
Logo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="">Link2</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="">Link1</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div id="background1" class="backgroundAll"></div>
<div id="background2" class="backgroundAll"></div>
<div id="background3" class="backgroundAll"></div>
<div id="content">
<div class="row mtCustom">
<div class="col-12">
<div class="text-center">
<span class="float-right">
<i class="play_animation fas fa-pause"></i>
<i class="play_animation fas fa-play"></i>
</span>
<h1 class="py-5">Header</h1>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>.backgroundAll {
position: fixed;
[...]
做到了。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句