페이지 로딩 애니메이션

솔루션개발

· 1년 전 · 조회 704 704

<!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에서 해주시기 바랍니다.

글쓰기

번호	분류	제목	글쓴이	날짜	조회
5156	PHP	제로보드의 메모왔어요의 기법을 다르게 구현하면?	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	972
5155	JavaScript	시계 스크립트 그런데 페이지 뜨는건 느린게 문제네...	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	857
5154	PHP	php 업로드 소스 [4]	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1770
5153	웹서버	리눅스 압축풀기 방법 lzip 제외. 일반적 쓰는	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	816
5152	PHP	fopen의 꼼수? 흉내내기. [1]	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1000
5151	PHP	happyl 페이징 다시 뜯어 no bug [ 보강 ]	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	859
5150	node.js	간단한 채팅	tmp 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1292
5149	OS	서버호스팅[ubuntu] 에 php-fpm , php5.x를 깔아야할때	지구버스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1524
5148	웹서버	라라벨 설치시 404 오류가 나오는 경우	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	923
5147	PHP	ChatGPT API 예제 [30]	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	6904
5146	JavaScript	두가지 형태의 페이지 로딩 [ 로딩중, 로딩 프로그레스바 ] [2]	예뜨락 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1706
5145	PHP	영카트 쇼핑몰 구축과 관련해서 과외해 주실 분 있을까요? [2]	아노라니 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	935
5144	PHP	두 날짜 사이의 날 수 구하기 [2]	우러러 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1416
5143	JavaScript	관계에 따른 메뉴 구성방안 [1]	개노미 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	821
5142	PHP	valcmp() 함수 - 지정 범위에 값이 있는지 여부 체크 사용자정의함수	sinbi 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	912
5141	웹서버	소프트링크(심볼릭링크) 잘못 삭제했다가 영업중인 쇼핑몰 관리자 날린 이야기 [11]	본연 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	2410
5140	기타	웹방화벽 캐슬 아이피 차단 안먹힐때 [1]	경천76 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1552
5139	JavaScript	엘레먼트 요소에서 data 를 이벤트 핸들러로 사용하기 [4]	비타주리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1198
5138	PHP	foreach()에서 next() 사용하기 [3]	엑스엠엘 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1510
5137	MySQL	interval에 쓸 수 있는 값 [3]	엑스엠엘 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1697
5136	PHP	탈퇴합니다. [6]	메리7 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	2000
5135	PHP	영카트 주소검색부분 에러문제 해결법 [10]	카깡 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1946
5134	JavaScript	회원가입 [2]	오토소프트 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1099
5133	PHP	자주 쓰는 제어문 대체 문법 정리해서 올립니다!	코드오타쿠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1134
5132	웹서버	CentOS 7 에서 MariaDB 5.5에서 10.5 업그레이드시 레포지트리 에러발생시 [1]	하늘뚱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1293
5131	OS	리눅스 Linux Public Key 추가 명령어 [5]	HLAB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1927
5130	OS	리눅스 Linux df 사용법 [1]	HLAB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1408
5129	OS	리눅스 Linux du 사용법 [1]	HLAB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1794
5128	OS	리눅스 Linux md5, sha1 해시값 확인하기 [1]	HLAB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	1805
5127	OS	리눅스 Linux tmux 주요 명령어	HLAB 프로필 보기 이 회원 글보기 이 회원의 댓글보기	3년 전	923