<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<view style="background-color: #39B54A;height: 100vh;">
<marquee style="transform:rotate(0deg,0deg,0deg,0deg);background- color: #0081FF;" behavior="alternate" direction="left">Hello</marquee>
</view>
</body>
</html>The effect I want is like this,Is there any good way?
Advertisement
Answer
Try like below:
marquee {
background-color: #39B54A;
width: 100vh; /* width based on screen height */
transform:rotate(90deg) translateY(calc(-50% - 50vw)); /* rotate and center */
transform-origin:top left;
}
body {
margin:0;
}<marquee behavior="alternate" direction="left">Hello</marquee>
And since marquee is obsolete, You can do it like below:
.marquee {
background-color: #39B54A;
width: 100vh; /* width based on screen height */
transform:rotate(90deg) translateY(calc(-50% - 50vw)); /* rotate and center */
transform-origin:top left;
}
.marquee > span {
display:inline-block;
position:relative;
left:0;
animation:move 4s alternate infinite linear;
}
@keyframes move {
to {
transform:translateX(-100%);
left:100%;
}
}
body {
margin:0;
}<div class="marquee"><span>Hello</span></div>