मैं बिना किसी सफेद जगह/अंतराल के लंबवत मार्की लूप बनाने की कोशिश कर रहा हूं लेकिन मैं इसे दोहराना प्रतीत नहीं कर सकता। मैंने aria-hidden="true" जोड़ा जो मेरे हॉरिजॉन्टल मार्की पर काम करता था लेकिन इस बार ठीक नहीं लगता।

यहाँ मार्की के साथ एक कोड पेन है: https://codepen.io/theomarusman/pen/oNbBgej ए>

यह वह सफेद जगह है जिसे मैं हटाना चाहता हूं

संपादित करें: पंक्ति और कॉल टैग बेकार हैं मैं इसे बनाने के लिए किसी अन्य मार्की से कोड का उपयोग कर रहा हूं और वहां मैंने इसे एक पंक्ति और कॉल में उपयोग किया है

0
Omar Usman 18 जून 2020, 19:04

1 उत्तर

सबसे बढ़िया उत्तर
/* Please try this instead */

body {
	background-color: black;
}

.side-bar {
	top: 0;
	left: 0;
	height: 100%;
	color: white;
	writing-mode: vertical-rl;
	text-orientation: sideways-right;
}

.marquee p {
	overflow: hidden;
	white-space: nowrap;
	height: 100%;
}

.marquee span {
	animation: marquee 8s linear infinite;
	display: inline-flex;
	padding-right: 10px;
	font-size: 4rem;
}

@keyframes marquee {
	from {
		transform: translateY(-100%);
	}

	to {
		transform: translateY(0);
	}
}
    <div class="position-fixed side-bar">
      <div class="row marquee">
        <div class="col-12 bg-white">
          <p class="m-0 p-0 p-3">
            <span class="m-0 p-0 pb-4" aria-hidden="true">USE CODE "MLT"</span>
            <span class="m-0 p-0 pb-4" aria-hidden="true">USE CODE "MLT"</span>
            <span class="m-0 p-0" aria-hidden="true">USE CODE "MLT"</span>
          </p>
        </div>
      </div>
    </div>
.marquee {
  overflow: hidden;
  white-space: nowrap;
}

@keyframes marquee {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

यह कोड निम्न में बदल जाता है।

.marquee p{
  overflow: hidden;
  white-space: nowrap;
  height:100%;
}

@keyframes marquee {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

कोडपेन में हल किया गया

https://codepen.io/Rayesac/pen/OJMWMpm

अधिक उदाहरण हैं

सफेद स्थान और JS के बिना क्षैतिज मार्की

सफेद स्थान और JS के बिना लंबवत मार्की

1
Rayees AC 18 जून 2020, 19:00