I'm

Developer, Designer, Photographer

GET IN TOUCH

  • Buk-gu, Busan, Republic of Korea
  • ungdoli0916@naver.com
  • Kakao ID : Ungdoli
Your message has been sent. Thank you!
(즐거웅코드) CSS marquee(움직이는 텍스트) 다중 구현하기

· 즐거'웅' 코드 (Source)/HTML & CSS & JAVASCRIPT
2021. 9. 8. 17:48

반응형

[즐거'웅'코드] 목차

  1. 예제 소스
  2. 구현 예시
예제 소스
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
 
<style>
    @keyframes marquee_1 { 0% { left: 20%; } 100% { left: -80%; } }
    @keyframes marquee_2 { 0% { right: 100%; } 100% { right: 0; } }
    @keyframes marquee_3 { 0% { left: 70%; } 100% { left: -30%; } }
 
    .marquee .outer {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        overflow: hidden;
    }
 
    .marquee .outer .inner {
        position: relative;
        display: flex;
        width: 200%;
    }
 
    .marquee .outer .inner:nth-child(1) {
        animation: marquee_1 5s linear infinite;
    }
 
    .marquee .outer .inner:nth-child(2) {
        animation: marquee_2 5s linear infinite;
    }
 
    .marquee .outer .inner:nth-child(3) {
        animation: marquee_3 5s linear infinite;
    }
 
    .marquee .outer .inner .content {
        width: 50%;
    }
</style>
 
<div class="marquee">
    <div class="outer">
        <div class="inner">
            <span class="content">marquee 테스트 중입니다.</span>
            <span class="content">marquee 테스트 중입니다.</span>
        </div>
        <div class="inner">
            <span class="content">marquee 테스트 중입니다.</span>
            <span class="content">marquee 테스트 중입니다.</span>
        </div>
        <div class="inner">
            <span class="content">marquee 테스트 중입니다.</span>
            <span class="content">marquee 테스트 중입니다.</span>
        </div>
    </div>
</div>
구현 예시
반응형
저작자표시

'· 즐거'웅' 코드 (Source) > HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

(즐거웅코드) 자바스크립트 한 글자씩 순서대로 입력시키기  (0) 2021.09.10
(즐거웅코드) favicon.ico 404 Not found 에러 해결하기  (0) 2021.09.09
(즐거웅코드) CSS marquee(움직이는 텍스트) 구현하기  (0) 2021.09.07
(즐거웅코드) CSS animation 멈추기(일시정지)  (0) 2021.09.06
(즐거웅코드) CSS loading spinner 만들기  (0) 2021.09.05

관련글

댓글 0

티스토리툴바