.bg
{
width: 100vw;
height: 100vh;
}<div class="bg">
<img src="https://www.roadsbridges.com/sites/rb/files/styles/content_type_page/public/Traffic_Safety_64.jpg?itok=a9CICO90" alt=""/>
</div>嗨，我想使用道路影像作為背景，但我也希望它在螢屏上無限回圈，就好像道路在移動一樣。我可以使用什么 CSS 或 ReactJS 代碼來做到這一點？
uj5u.com熱心網友回復：
那有點傻。
.bg
{
background: url("https://www.roadsbridges.com/sites/rb/files/styles/content_type_page/public/Traffic_Safety_64.jpg?itok=a9CICO90");
width: 100vw;
height: 100vh;
background-size: 300px 100px;
}<div class="bg">
</div>uj5u.com熱心網友回復：
我認為您可以使用 css 屬性 tranform-y 和影片
uj5u.com熱心網友回復：
有不同的方法，看看這個codepen https://codepen.io/konker/pen/Qozzrj
#road {
opacity:.9;
width: 120vw;
height: 20vw;
min-height:200px;
background: #888;
background-image: linear-gradient(
rgba(0, 0, 0, 0.7) 0%,
rgba(0, 0, 0, 0.2) 35%,
rgba(80, 80, 80, 0.2) 50%,
rgba(30, 30, 30, 0.4) 70%,
rgba(60, 60, 60, 0.5) 87%,
rgba(180, 180, 180, 0.5) 100%
),
url("image url");
background-size: 19vw auto;
transform-origin: center top;
transform: rotateX(45deg) translate(-20vw);
animation: stripemove 0.2s linear infinite;
}
@keyframes stripemove {
to {
transform: rotateX(45deg) translate(0vw);
}
}
使用影片屬性，如：
.bg img {
height: 25vh;
width: 200vw;
position: absolute;
left: 0;
bottom: 0;
z-index: 10;
animation: moving 3s linear infinite 1s;
}
@keyframes moving {
100% {
transform: translateX(-100vw);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/448380.html
標籤：javascript css 反应
上一篇：React中輸入值的自動大寫
下一篇：如何使用CSS修復球影片