Q&A
クラス名全角はメリットがないのと、コードだけでは何とも言えない部分はあります。
その画像が大事ならなおさらです。
あと、コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564
<body bgcolor="#f0f">
<style type="text/css">
[class="金サワ485系k10+k00"]{
white-space: nowrap;
animation: horizontal 20s linear infinite alternate;
}
@keyframes horizontal {
0% { transform:translateX( -1000px); }
100% { transform:translateX( 1000px); }
}
</style>
<p class="金サワ485系k10+k00">
<img src=".\バナー 2021-4-30 Fri\電車 バナー 2021-4-30 Fri\JR\485系\編成 2020-10-22 Thu\金サワ 98.4.1現在\K11編成 Tc481-701 左 2020-10-21 Wed 8184_8.png"><img src=".\バナー 2021-4-30 Fri\電車 バナー 2021-4-30 Fri\JR\485系\編成 2020-10-22 Thu\金サワ 98.4.1現在\K11編成 M'484-317+Mc485-201 交流区間 海側 2020-2-24 Mon 8051_0.png"><img src=".\バナー 2021-4-30 Fri\電車 バナー 2021-4-30 Fri\JR\485系\編成 2020-10-22 Thu\金サワ 98.4.1現在\K01編成 Tc481-337他7連 2020-2-21 Fri 8184_8.png">
</p>
この構文で電車を動かしていますが、いかんせん、列車がhtmlのページを超えて見えない位置にまで動いてしまっています。
これをページ内に収める構文はないのでしょうか。
回答2件
0
こうでしょうか？
css
1[class="金サワ485系k10+k00"]{ 2white-space: nowrap; 3animation: horizontal 20s linear infinite alternate; 4width: max-content; 5} 6@keyframes horizontal { 70% { transform:translateX( 0 ); } 8100% { transform:translateX( calc(100vw - 100%) ); } 9}
投稿2021/05/15 01:17
総合スコア36989
0
CSS
1@keyframes horizontal { 20% { transform:translateX( -1000px); } 3100% { transform:translateX( 1000px); } 4}
-1000px～1000pxで指定しているからはみ出すんじゃないかなぁ？
試しに半分にしてみるとか。
投稿2021/05/14 12:16
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
