페이지 로딩 애니메이션

솔루션개발

· 1년 전 · 조회 714 714

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

글쓰기

번호	분류	제목	글쓴이	날짜	조회
4886	PHP	여러 체크박스 체크하고, 또 수정할 경우에 체크된 상황을 그대로 보여주는,,,	xpem 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2395
4885	PHP	배열 내장함수 - array_change_key_case	유창화 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2709
4884	기타	일반적인 미디어쿼리 [4]	푸루루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	3085
4883	PHP	특정 ip에서만 모바일 사용	푸루루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2368
4882	PHP	문자열 자르기, substr() [1]	푸루루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	3711
4881	PHP	하루전 일주일전 한달전 [1]	col 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	3347
4880	JavaScript	어제날짜, 내일날짜 구하기	푸루루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	3345
4879	JavaScript	날짜형식 체크 [2]	푸루루 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	3066
4878	PHP	유용한 일반 함수 모음 (PHP) [12]	덕서리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	5457
4877	PHP	리눅스에서 <?php 는 작동하는데 <? 로 시작하면 파일 깨질때... [5]	welcome 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2920
4876	OS	1원팁: Vagrant와 VirtualBox 호환 버전 - 2018.05.02기준	xpem 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2943
4875	기타	2개의 DB에 그누보드가 설치되었을 때 변경된 칼럼비교 (g5로 시작되는 테이블만 일단!) [1]	xpem 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2394
4874	PHP	GeoIP 모듈 사용시 2자리코드를 한글로 반환 해주는 코드	LucyLee 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2756
4873	웹서버	도메인 rewrite 구현? [1]	black 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2363
4872	PHP	php async [3]	terrorboy 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	3579
4871	기타	웹 문서를 PDF 로 변환/다운로드 해주는 사이트 [6]	상큼쏭 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	3352
4870	기타	ing API를 이용한 주식자동매매 프로그램(1)	어스지웹 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	5659
4869	기타	아이폰 사파리 자동로그인해결하기	덕서리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	4231
4868	JavaScript	스택(stack)을 이용한 사칙연산(+ - * /) 계산기 [4]	슈와이 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	4585
4867	PHP	PHPMailer 를 이용한 email 발송 [2]	싸이드뤠이스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	3924
4866	JavaScript	다양한 카운트다운 소스 [6]	덕서리 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	4449
4865	PHP	간단한 PHP 프레임워크 [10]	gshn 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	5630
4864	jQuery	atj.js [3]	Rido 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2593
4863	jQuery	간략 이미지 롤오버 jquery문 ( mouseenter/mouseleave 이벤트 ) [4]	루돌프사슴코 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	3994
4862	JavaScript	네이버 지도 api v3 주소->좌표 변환해서 출력하는 예제 [5]	Rido 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	7809
4861	기타	Poedit 기본 문장 입력을 간단하게	Rido 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2266
4860	웹서버	우분투 LEMP 스택 자동 설치 스크립트	gshn 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	2503
4859	기타	poedit 를 사용하여 po, mo 파일 만들기 [1]	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	6956
4858	기타	poedit 를 사용하여 그누보드5 다국어 버전 쉽게 만들기 [10]	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	5125
4857	웹서버	네이버클라우드플랫폼에서 서버생성하고 NGINX + PHP-FPM + MariaDB 설치하기 [12]	리자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	7년 전	6197