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 animation 멈추기(일시정지)

· 즐거'웅' 코드 (Source)/HTML & CSS & JAVASCRIPT
2021. 9. 6. 18:05

반응형

[즐거'웅'코드] 목차

  1. CSS
  2. 예제 소스
  3. 구현 예시
CSS
1
2
3
 
<style>
    .obj { animation-play-state: paused; }
</style>
예제 소스
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
 
<style>
    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
 
    .container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
 
    .spinner {
        width: 70px;
        height: 70px;
        border: 7px solid rgba(163, 151, 198, 0.2);
        border-top: 7px solid rgba(163, 151, 198, 1);
        border-radius: 50%;
        animation: spin 2s linear infinite;
    }
 
    .spinner:hover {
        animation-play-state: paused;
    }
</style>
 
<div class="container">
    <div class="spinner"></div>
</div>
구현 예시
반응형
저작자표시

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

(즐거웅코드) CSS marquee(움직이는 텍스트) 다중 구현하기  (0) 2021.09.08
(즐거웅코드) CSS marquee(움직이는 텍스트) 구현하기  (0) 2021.09.07
(즐거웅코드) CSS loading spinner 만들기  (0) 2021.09.05
(즐거웅코드) 자바스크립트 동영상 전체 화면(fullscreen)으로 재생하기  (2) 2021.09.03
(즐거웅코드) 제이쿼리 동영상 정지시키기(pause)  (0) 2021.09.02

관련글

댓글 0

티스토리툴바