在成帧运动中创建城市景观的循环滚动背景

问题描述

我正在尝试创建城市景观的无缝循环动画，并以稳定的速度平移场景。我本质上想做的是拍摄一张无缝的城市图像，然后将其缓慢地通过视口平移，当图像的左侧碰到视口的最左侧时，图像的另一个副本再次开始动画，产生的效果是位于建筑物的顶部，并不断地用摄像机反复平移。这是我的代码：

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import './styles.scss';
import { Image,Container,Row } from 'react-bootstrap';
import CamcoNavbar from '../components/camconavbar.js';
import BackgroundImage from '../../static/Untitled-1.jpg';
import CClogo from '../../static/CamCo(white).png'
import { motion } from 'framer-motion';

const Home = () => {
  return (
    <div>
      <CamcoNavbar />


      <motion.img className="header-image" key={BackgroundImage} src={BackgroundImage} initial={{x: -250}} animate={{x: 1000}} transition={{duration: 60,repeat: Infinity}}/>



    </div>
  )
}

export default Home

这是我的css文件：

@import "~bootstrap/scss/bootstrap";

body {
  background-color: black;
}

.nav-item {
  padding-left: 20px;
  padding-right: 20px;
}

.nav-item a {
  text-decoration: none;
  letter-spacing: 5px;
  font-weight: 300;
  font-size: 12px;
  color: white;
}

.nav-item a:hover {
  text-decoration: none;
  color: #64a0c2;
}

.carousel-item {
  background-color: blue;
  width: 400px;
  height: 400px;
}

button.navbar-toggler {
  justify-content: center;
}

.header-image {
  object-fit: cover;
  display: inline-block;
  min-width: 100%;
  min-height: 100%;
  width: 120%;
  height: 120%;
  position: fixed;
  top: 0;
  z-index: -4;
}

.cclogo {
  position: relative;
  top: 50%;
  left: 50%;
z-index: 2;

}

p,h1,h2,h3,h4,li {
  color: white;
}

.cclogo {
  position: fixed;
  z-index: 2;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）