[css] 모서리 종이 말려지는 효과를 만들어봄. (쏘 이지~)

간단하지만 효과가 좋아보이는 종이 말리는 효과를 줘 보았음.

일단 아래에 결과물을 보면 굉장히 자연스러운 듯. ㅎㅎㅎㅎ

제작방법

① 일단 이미지를 준비해야 함. 아래와 같이 커져있는 png 이미지 하나를 만듦.

② 만든 이미지를 position으로 띄우고, size를 0으로 줄여야 함. 본인은 transform: scale(0, 0); 으로 줄여놓았음.

이때! 이미지가 왼쪽 위에서 커져야하기 때문에 transform-origin: 0 0; 을 같이 줌.

(만약 오른쪽에서 커져야 한다면, transform-origin: 100% 0; 으로 사용하면 되겠죵?)

③ 사이즈를 원래대로! transform: scale(1, 1); 으로 주면 끄읕~

(본인은 animation으로 효과를 만들어 봄)

코드

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> paper curl animation </title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html, body{
            width: 100%;
            height: 100%;
        }
        .section{
            display: block;
            position: relative;
            height: 100%;
            background: skyblue;
        }
        .item-paper-curl{
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 5em;
            height: 5em;
            background: url(img-papercurl.png) no-repeat 50% 50% / contain;
            transform: scale(0, 0);
            transform-origin: 0 0;
            /* 
            @keyframes 
            duration | easing | delay | count | direction | fill-mode | play-state | name 
            */
            animation: ani_papercurl .5s ease-out 1s 1 normal forwards;
        }
        @keyframes ani_papercurl{
            to{
                transform: scale(1, 1);
            }
        }
    </style>
</head>
<body>
    <section class="section">
        <div class="item-paper-curl"></div>
    </section>
</body>
</html>

추천 포스트

[css] clip-path를 이용한 텍스트 안 wave 애니메이션

열심히 일하며 달려오다가 잠깐 시간이 되서, 그동안 생각만 하고 있던 wave 효과들을 한 번 나중에 써먹어볼 생각으로 구글링 하던 중 지금까지 생각하지 못한 clip-path 방법으로 wave 효과를 주는

minitoy.tistory.com

728x90

'WWWEB > CSS' 카테고리의 다른 글

[CSS] ":nth-child()"로 몇 번부터 몇 번까지 선택하기 (0)	2023.08.21
[css] 텍스트 안에 그라데이션 배경 움직여보기 (0)	2023.06.08
최근 네이버 CSS 초기화 코드 (mo/pc) (0)	2023.05.25
max-height를 이용한 부드럽게 열리는 더보기 (0)	2023.05.10
[css] clip-path를 이용한 텍스트 안 wave 애니메이션 (0)	2023.04.26
단어가 짧을 때 양쪽 정렬(text-align: justify) 방법 [only css] (1)	2023.04.11
[ css ] position: sticky가 안 먹는 경우, 적용 조건 (0)	2023.03.28
[css] 말줄임 여러 줄 예시 (1)	2023.02.14

UIUX.DESIGNER.NOTE❤