I'd like to ask how to use css to achieve this scrolling effect. - Codes Helper - Programming Question Answer

I'd like to ask how to use css to achieve this scrolling effect.

< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< title > moveUp < / title >
< style >
@ keyframes scroll {
0% {

-webkit-transform: translateY(0px);
transform: translateY(0px);

}
20% {

-webkit-transform: translateY(0px);
transform: translateY(0px);

}
25% {

-webkit-transform: translateY(-30px);
transform: translateY(-30px);

}
45% {

-webkit-transform: translateY(-30px);
transform: translateY(-30px);

}
50% {

-webkit-transform: translateY(-60px);
transform: translateY(-60px);

}
70% {

-webkit-transform: translateY(-60px);
transform: translateY(-60px);

}
75% {

-webkit-transform: translateY(-90px);
transform: translateY(-90px);

}
95% {

-webkit-transform: translateY(-90px);
transform: translateY(-90px);

}
100% {

-webkit-transform: translateY(-120px);
transform: translateY(-120px);

}
}
div {
width: 200px;
height: 30px;
overflow: hidden;
}
ul {
height: 100%;
width: 100%;
-webkit-animation: scroll 5s infinite;
margin: 0;
padding: 0;
}
li {
line-height: 30px;
height: 30px;
}
< / style >
< / head > <

    <li></li>
    <li></li>

< / div >
< / body >
< / html >
these are the effects I want to achieve, but how to write this when the number of li is uncertain

Jan.08,2022

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
    <style>
        *{margin: 0;padding: 0;}
        .wrap{width:100px; margin: 100px auto;position: relative; overflow: hidden;height: 30px;}
        .scroll_box{position: absolute; top: 0;left: 0;width: 100%;}
        .scroll_box li{line-height: 30px; background: red; color: -sharpfff; text-align: center;}
    </style>
</head>
<body>
    <div>
        <div class="wrap">
            <ul class="scroll_box">
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
    </div>
</body>
<script>
    var box = document.getElementsByClassName("scroll_box")[0];
    var len = box.getElementsByTagName('li').length;
    var index = 0;
    setInterval(function(){
        index === (len-1) ? index = 0 : indexPP;
        box.style.top = index*30*-1+'px';
    },1000)

</script>
</html>

Previous: How to disable the pull-up and pull-down on the Wechat page on mobile?

Next: Python reportlab create paging

Let table be able to separate different colors?
want to explain how to make table different colors? is not different. is . <table> <tr> <td width="100">a< td> <td><a>< td> < tr> <tr> ...

Jquery css3 css html5 table

Feb.26,2021
Vue page switching fixed positioning problem?
<template> <div style="height: 100%;"> <mt-header title=""> <mt-button icon="back" slot="left" v-tap="{methods: switchView, view: Post }">< mt-button> &l...

Css3 css html5 vue.js

Feb.27,2021
Onload fails completely in safari
$(document).ready(function(){ $(".pageloading").show(); $(window).on("load", function() { $(".pageloading").fadeOut(); }); }); google chrome can, will $( ".pageloading "). FadeOut (); but the safari networ...

Safari-display-web-page-is-not-normal html5 css3 safari jquery

Feb.27,2021
The parent div sets the property of overflow-y:auto, and the box-shadow property of div cannot be displayed on the left and right sides of it.
regarding the problem of css style, the parent div sets the property of overflow-y:auto, in which the box-shadow attribute of div cannot be displayed on the left and right sides. code is as follows: <div id="box"> <div class=&qu...

Css3 html css

Feb.27,2021
Is flex compatible with ie9 when using postcss?
is flex compatible with ie9 when using postcss? ...

Css3 css

Feb.27,2021
Using flex layout and overflow to realize different problems on chrome and firefox
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title< title> <style type="text css"> html, body { height: 100%; wid...

Chrome firefox css3

Feb.27,2021
How to keep the document stream from moving when using transform:scale
as shown in the figure above, use css to make a magnification effect when a mouse passes over a square, but as soon as you enlarge a square, the square next to it will be squeezed out or squeezed into the next row. Is there any way to fix the enlarge...

Html css css3 web front-end

Feb.27,2021
How to shift a rotated element?
I have two elements, a parent element and a child element. the parent element rotates N degrees. then I want to move the positioning of the child element, which moves relative to the parent element. how do I calculate the offset value. Let it move re...

Algorithm Mathematical html javascript css3

Feb.27,2021
Will the use of font-family in the pc page css cause font infringement?
does the use of font-family in the pc page css cause font infringement ...

Html5 html css3 css web

Feb.28,2021
Seems to have found a BUG? with a Chrome memory leak.
< H1 > problem description < H1 > while writing transition animation, I inadvertently found that sometimes the page would jam, and the Chrome memory of the viewing task manager suddenly soared. After various exclusions, I found that transform:skew (9...

Javascript html5 css3 css3-Animation

Feb.28,2021
Flex layout
<view style= display:flex > <view style= display:flex;flex:1;flex-direction:column;align-items:stretch; > <view class= >:<text style= color:-sharpff0000 >{{ sum - promTotal }}< text>< view> <view ...

Css3

Feb.28,2021
The problem of pseudo-elements in css
works well in other browsers, but three 1s appear under Firefox ...

Css3

Feb.28,2021
Discuss the best CSS way to write this kind of coupon
Note: 1. Background gray 2. The coupon has a shadow, but the shadow of the gap also needs a gap. I hope shadows and rounded corners can be controlled by css. 3. It is hoped that the position of the center line can be controlled by css. seek opt...

Css3

Feb.28,2021
Now the company wants to do IE 11 browser compatibility, what plug-ins or shortcut methods can solve this compatibility problem?
our previous code is adapted to Google and Firefox, but now it is required that the code is compatible with IE11 browsers. It is impossible for me to rewrite the code, is it? Is there any quick way to solve it as soon as possible? The error is as follow...

Css3 ie11 ie-is-compatible-with internet-explorer

Feb.28,2021
How can WeChat Mini Programs set the font size of the root element and then use rem?
@ media only screen and (min-width:320px) {html {font-size:12px;}} @ media only screen and (min-width:375px) {html {font-size:13px;}} @ media only screen and (min-width:412px) {html {font-size:14px;}} htmlrem1rembodypagepage1rem1rem16px1rem ...

Mini-Program html css html5 css3

Feb.28,2021
Whether the border of table can be controlled in this way.
for example, can there be a gray between payment and order price , but if this gray line is not all , then it is about 80% and then put it in the middle . Can this be done ? Update every line is only 80% . ...

Css3 css html5 table

Feb.28,2021
Use vue to make a nine-grid lucky draw.
use vue to do a nine-grid lucky draw, which is fast at the beginning, slow down after a few laps, and can control where to stop. There is a big lucky draw button in the middle of the prize. How to write the style, ask for advice ...

Html5 css3 vue.js javascript

Feb.28,2021
Animation-play-state:paused pauses animation ios is invalid
ios11 system, Wechat and browser are not good, animation cannot be paused at the beginning, and no problems are found in computer or qq <div className="c-Random-started" onClick={this.randomVisible} style={this.state.clickonthe...

Css3 css3-Animation react.js css javascript

Feb.28,2021
How can react pause / resume animation?
AnimationPlayState: paused fails on ios, so I m going to abandon it. I see a divine solution https: codepen.io HaoyCn pen., but I don t know how to write it on react, ask for advice! <div style={this.props.clickonthe ? { AnimationPlayS...

React.js css3 css javascript

Mar.01,2021
How to choose the Chinese characters provided by Google?
https: fonts.google.com spec.:400,500,500i,700 https: fonts.google.com specimen Ubuntu?selection.family=Ubuntu:400,500,500i,700 I choose Ubuntu and then I check regular 400 and I introduce it to the web site and write it like this . font-family: ...

Css3 css google font-family font

Mar.01,2021

Menu