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