페이지 로딩 애니메이션

솔루션개발

· 1년 전 · 조회 713 713

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

글쓰기

번호	분류	제목	글쓴이	날짜	조회
4916	웹서버	APM AUTO INSTALLER V 0.3.3 [2]	亞波治 프로필 보기 이 회원 글보기 이 회원의 댓글보기	6년 전	2867
4915	PHP	php 7.x에 대한 상수 정의( define( ) ) 부분에 관하여.......	불량학생™ 프로필 보기 이 회원 글보기 이 회원의 댓글보기	6년 전	2181
4914	웹서버	APM AUTO INSTALLER V 0.3.2.1	亞波治 프로필 보기 이 회원 글보기 이 회원의 댓글보기	6년 전	1893
4913	JavaScript	video를 연속으로 재생	티로그 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2598
4912	node.js	nodejs 환경변수 설정하기 ^^ 영상있음 [4]	소프트존 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	3715
4911	기타	PWA 앞으로 어떻게 될까요? [4]	그누모리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	4193
4910	기타	AJAX - 서버에 요청 보내기 #1	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2277
4909	기타	이전 브라우저 (IE5 및 IE6) XMLHttpRequest 객체 사용	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	1984
4908	기타	AJAX의 XMLHttpRequest 객체	수다왕 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2017
4907	Mobile	SugarORM, 안드로이드 어플 개발시 로컬디비 라이브러리	날쌘펭귄 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2289
4906	JavaScript	소수점 지원하는 Math.round	레드베어 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2293
4905	기타	스크린샷이 필요할때?	레드베어 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2274
4904	jQuery	tooltipsy 사용하기 쉬운 jquery library	티로그 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2520
4903	PHP	PHP 문법 중 헷갈리는 몇가지 정리 [8]	그누모리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	5229
4902	jQuery	select 선택에 따라 테두리 색상 변경 [3]	티로그 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	5130
4901	기타	slack 에 github 연동하기 [1]	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2708
4900	MySQL	mysql 속도 증가 [6]	Rojo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	4115
4899	기타	가위바위보 게임입니다. [1]	Rojo 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2267
4898	웹서버	[미립자팁] 우분투에서 그누보드 사이트 Let's Encrypt 적용 (SSL 무료 적용) [3]	그누성민 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2452
4897	MySQL	[1원팁] mysqli 에러코드 반환을 위해...	xpem 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2206
4896	MySQL	JSON with MariaDB 10.2.4 / MySQL 5.7.8	해피정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2635
4895	JavaScript	공휴일관련 정부 데이터 api [2]	Rido 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	9774
4894	웹서버	http->https 그리고 www.domain.com -> 을 자동으로 https://domain.com 으로 포워딩	xpem 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2363
4893	기타	chrome(크롬) 안전한 연결 설정중 딜레이 해결 방법	인덱스웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	8319
4892	jQuery	모달을 이용해 변수를 주고받고 업데이트까지 하는 테스트 Ajax test [11]	감기약 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	5685
4891	기타	우회사이트 접속하기 프로그램 핫스팟쉴드	알미z 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2837
4890	PHP	이름에 별표시 및 글자자르기 [3]	알미z 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	3421
4889	JavaScript	남은시간 카운트하는 자바스크립트 [1]	알미z 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	6377
4888	MySQL	스팸글 삭제 문의 [1]	북금곰 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	3139
4887	MySQL	비회원글삭제 방법문의 [1]	북금곰 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2767