Home Web Front-end CSS Tutorial Text scrolling up regularly using CSS3

Text scrolling up regularly using CSS3

Jun 25, 2018 pm 03:24 PM
css3 timing letter scroll

In the past, we basically used Javascript to achieve the effect of text scrolling upwards at regular intervals. So today I will share with you how to use CSS3 to achieve this effect. If you need it, you can refer to it.

Not much to say, let’s go directly to the example code

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>moveUp</title>

<style>

 ul,li{ margin:0; padding:0; }

 li{ list-style:none; }

 .container{ display:inline-block; background:#efefef; padding:10px; border:1px solid #ccc; font-family:"Microsoft YaHei";  }

 .container .li-box{ height:28px; overflow:hidden; }

 .container ul{ position:relative; animation: moveUp 8s 0.6s infinite; -webkit-animation: moveUp 8s 0.6s infinite; }

 @keyframes moveUp

 {

  0% {top:0px;}

  18% {top:0px;}

  20% {top:-28px;}

  38% {top:-28px;}

  40% {top:-56px;}

  58% {top:-56px;}

  60% {top:-84px;}

  78% {top:-84px;}

  80% {top:-112px;}

  98% {top:-112px;}

 }</p> <p>  @-webkit-keyframes moveUp /*Safari and Chrome*/

 {

  0% {top:0px;}

  18% {top:0px;}

  20% {top:-28px;}

  38% {top:-28px;}

  40% {top:-56px;}

  58% {top:-56px;}

  60% {top:-84px;}

  78% {top:-84px;}

  80% {top:-112px;}

  98% {top:-112px;}

 }

 .container li{ line-height:1.8; color:#666; }

</style>

</head>

<body>

<p>

 <p>

  <ul>

   <li>飞鲨勇士张超:曾驾歼-8战机逼退外军侦察机</li>

   <li>台媒炒作大陆军机飞临台海 台军方:全程监控</li>

   <li>菲总统对华为何晴转阴:先期待“访华”后欲“清算中国”</li>

   <li>外媒称韩国醉心中等强国地位 屡次在关涉中国时遇挫</li>

   <li>伊朗官方回应日本驻伊大使被扣押:没有的事儿</li>

   <li>菲总统对华为何晴转阴:先期待“访华”后欲“清算中国”</li>

  </ul>

 </p>

</p>

</body>

</html>

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone’s learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Beautiful buttons made using css style

Css page layout with left, middle and right columns accomplish

The above is the detailed content of Text scrolling up regularly using CSS3. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to achieve wave effect with pure CSS3? (code example) How to achieve wave effect with pure CSS3? (code example) Jun 28, 2022 pm 01:39 PM

How to achieve wave effect with pure CSS3? This article will introduce to you how to use SVG and CSS animation to create wave effects. I hope it will be helpful to you!

How to make round pictures and text in ppt How to make round pictures and text in ppt Mar 26, 2024 am 10:23 AM

First, draw a circle in PPT, then insert a text box and enter text content. Finally, set the fill and outline of the text box to None to complete the production of circular pictures and text.

How to add dots to text in word? How to add dots to text in word? Mar 19, 2024 pm 08:04 PM

When we create Word documents on a daily basis, we sometimes need to add dots under certain words in the document, especially when there are test questions. To highlight this part of the content, the editor will share with you the tips on how to add dots to text in Word. I hope it can help you. 1. Open a blank word document. 2. For example, add dots under the words &quot;How to add dots to text&quot;. 3. We first select the words &quot;How to add dots to text&quot; with the left mouse button. Note that if you want to add dots to that word in the future, you must first use the left button of the mouse to select which word. Today we are adding dots to these words, so we have chosen several words. Select these words, right-click, and click Font in the pop-up function box. 4. Then something like this will appear

Use CSS skillfully to realize various strange-shaped buttons (with code) Use CSS skillfully to realize various strange-shaped buttons (with code) Jul 19, 2022 am 11:28 AM

This article will show you how to use CSS to easily realize various weird-shaped buttons that appear frequently. I hope it will be helpful to you!

How to modify text on pictures How to modify text on pictures Aug 29, 2023 am 10:29 AM

Modifying the text on the image can be done by using image editing software, online tools or screenshot tools. The specific steps are: 1. Open the picture editing software and import the picture that needs to be modified; 2. Select the text tool; 3. Click the text area on the picture to create a text box; 4. Enter the text you want in the text box. 5. If you just want to delete the text on the picture, you can use the eraser tool or the selection tool to select and delete the text area.

How to hide elements in css without taking up space How to hide elements in css without taking up space Jun 01, 2022 pm 07:15 PM

Two methods: 1. Using the display attribute, just add the "display:none;" style to the element. 2. Use the position and top attributes to set the absolute positioning of the element to hide the element. Just add the "position:absolute;top:-9999px;" style to the element.

How to implement scrolling to a specified element position in JavaScript? How to implement scrolling to a specified element position in JavaScript? Oct 22, 2023 am 08:12 AM

How to implement the function of scrolling to a specified element position in JavaScript? In a web page, when we need to focus the user's line of sight to a specific element position, we can use JavaScript to implement the function of scrolling to the specified element position. This article will introduce how to implement this function through JavaScript and provide corresponding code examples. First, we need to obtain the position information of the target element. You can use Element.getBoundingClient

Golang Image Processing: Learn How to Add Watermarks and Text Golang Image Processing: Learn How to Add Watermarks and Text Aug 17, 2023 am 08:41 AM

Golang Image Processing: Learn How to Add Watermarks and Text Quotes: In the modern era of digitalization and social media, image processing has become an important skill. Whether for personal use or business operations, adding watermarks and text are common needs. In this article, we will explore how to use Golang for image processing and learn how to add watermarks and text. Background: Golang is an open source programming language known for its concise syntax, efficient performance and powerful concurrency capabilities. it has become the subject of many developments

See all articles