페이지 로딩 애니메이션

솔루션개발

· 1년 전 · 조회 705 705

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body, html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: white;
}

.container {
width: 1920px;
height: 1080px;
position: relative;
overflow: hidden;
}

.divCover {
width: 100%;
height: 100%;
background-size: cover; /* Cover ensures the background image covers the entire div */
position: absolute;
clip-path: circle(0% at 50% 50%);
animation: OpeningAnimation 3s forwards;
}

@keyframes OpeningAnimation {
to {
clip-path: circle(75% at 50% 50%);
}
}
</style>
</head>
<body>
<div class="container">
<div class="divCover"><video loop playsinline autoplay muted="muted" src="1.mp4"></video></div> 
</div>

</body>
</html>

특정 사이트에서 동작하는 애니메이션 보고 인상적이어서 비슷하게 작업해 봤습니다.

동영상 대신 이미지 교체해도 좋습니다.

역동적이지는 않아서 좀 아쉽지만

처음 페이지 로딩때 활용하면 괜찮을 것 같습니다

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
5126	PHP	팁이라고 하기에는 부끄럽지만... [5]	코드오타쿠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1797
5125	PHP	[Linux] php 7.x 컴파일 설치하기	한빛가람 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1602
5124	PHP	PHP 7.0 설치하기 (아마존 라이트세일 AWS Lightsail) [4]	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	2117
5123	OS	리눅스 Linux 마운트, 언마운트 [1]	HLAB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1399
5122	OS	리눅스 Linux diff 명령어	HLAB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1316
5121	OS	리눅스 Linux tar, gz 압축 및 해제	HLAB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1419
5120	OS	Linux 리눅스 zip/unzip	HLAB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1296
5119	PHP	영카트 상품일괄 엑셀 업로드에 대한 질문입니다.	시니어월천 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1148
5118	PHP	phpspreadsheet 사용하다가 삽질...	티로그 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1362
5117	Mobile	플러터와 네이티브 어플 [2]	jjunge 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1402
5116	PHP	html 내에 php 제어문,반복문 쓸때 tip [11]	폭주죽 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	2295
5115	MySQL	SNS 형태의 친구 맺기 (일촌) 기능 DB구조 [4]	welcome 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	2906
5114	OS	리눅스 폴더내에서 동영상 일괄 인코딩 shell 명령어 [2]	벌이뉨 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	2005
5113	JavaScript	정규표현식 정리 [2]	둠칫 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1539
5112	PHP	select값 선택시 선택 값이 저장되고, 여분필드에 별도 지정값이 저장방법? [3]	지니나무 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1560
5111	기타	어드민 좌측 매뉴를 상위로 옮겨봤습니다.	레드불355 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1299
5110	PHP	https에서 http와 ajax 통신시 proxy 프로그램 만들기 [10]	벌이뉨 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	4545
5109	PHP	KimsQ 킴스큐RB 용 스마트에디터2 사진 업로더(보관용) [2]	경천76 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1580
5108	기타	[Selenium] select box, check box, radio button 조작하기 [1]	Innisfree 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	12175
5107	기타	[Python] MP4 썸네일 생성(JPG, MP4 클립) [2]	Innisfree 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	2409
5106	기타	[Python] HWP 파일을 불러오기	Innisfree 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	6323
5105	기타	[Python] Requests <-> Selenium 쿠키 연동 [5]	Innisfree 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	3696
5104	기타	[Python] 정규식을 사용하지 않고 문자열 내 특수문자를 제거하기 [2]	Innisfree 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1504
5103	JavaScript	포인문으로 엘레먼트의 "속살" 보기 [4]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1693
5102	기타	[Python] 내일 날짜를 구하는 파이써닉한 방법	Innisfree 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1272
5101	기타	[Python] 확장자가 표시되지 않는 온라인 이미지의 확장자를 확인하기 [2]	Innisfree 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1467
5100	기타	[Python] print() 되는대로 string으로 변환하는 함수 [2]	Innisfree 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1308
5099	웹서버	python3 manage.py runserver 0.0.0.0:8000 [4]	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	2174
5098	PHP	AWS Lightsail 의 PHP 7.x 버전에서 SSH2 서비스 사용하기 [1]	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1327
5097	PHP	알고있으면 좋은 코드 [2]	EI소프트 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1986