그리드 재배치 애니메이션CSS : happycgi

시작페이지로

즐겨찾기추가

로그인

l

l

마이페이지

l

그리드 재배치 애니메이션CSS : happycgi

전체 펼쳐보기

퀵메뉴링크

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 기본 소스 > 그리드 재배치 애니메이션CSS 상세정보

사이트등록

클라우드태그

javascript

HTML

PHP

Api

2022

ASP

CSS

mysql

Slide

jquery

모듈

갤러리

웹메일

현재접속자 명

새로고침

그리드 재배치 애니메이션CSS

소스통계정보

오류신고 및 문의

해피팀

네티즌

소스분류

기본 소스

다운로드 횟수

10 회

간단설명

CSS만으로 그리드 요소가 자연스럽게 이동하는 애니메이션 예제입니다.

평가하기

훌륭함

매우좋음

괜찮음

그리드 카드의 위치가 바뀔 때 CSS만으로 부드러운 이동 효과를 구현한 예제입니다.
JavaScript 없이 레이아웃 변화에 따른 애니메이션을 적용할 수 있습니다.
카드 목록, 갤러리, 대시보드 UI의 전환 효과를 만들 때 참고하기 좋습니다.

HTML 구조

<div class="container">

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

<div class="cell">

<div class="content">CONTENT</div>

</div>

</div>

CSS 소스

* {

box-sizing: border-box;

margin: 0;

padding: 0;

}

.container {

display: grid;

grid-template-columns: repeat(auto-fill, 6rem);

gap: 1em;

}

.cell {

height: auto;

aspect-ratio: 1;

anchor-scope: --a;

anchor-name: --a;

}

.content {

position: absolute;

position-anchor: --a;

inset: anchor(inside);

width: 6rem;

height: 6rem;

background: white;

border: 1px dotted black;

border-radius: 0.5rem;

place-content: center;

text-align: center;

transition: inset 0.2s ease;

}

body {

padding: 5vh;

}

네티즌 의견 이용하신 자료의 후기를 자유롭게 작성하세요. (상업적인 광고 및 도배성 글 등은 사전통보없이 삭제될 수 있습니다.)

내용

아이디

의견남기기

등록된 의견이 없습니다.

1