페이지 로딩 애니메이션

솔루션개발

· 1년 전 · 조회 703 703

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

글쓰기

번호	분류	제목	글쓴이	날짜	조회
5186	PHP	PHP 로직 실행과정을 웹페이지에 런타임현시 [2]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	940
5185	PHP	세션타임아웃기능	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	960
5184	PHP	유니큐 문자열 생성 함수를 공유해드립니다.	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	536
5183	PHP	나만의 프레임워크를 만들어 본다	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	835
5182	PHP	완벽한 UTF8 지원하기	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	775
5181	기타	CSS3으로 3디텍스트애니 작성하기 [2]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1016
5180		Season2 // How To Force SSL On All Pages In .htaccess File	울라프 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	572
5179	기타	CSS의 마우스커서 리스트 [1]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1428
5178	PHP	PHP에서 HTML구문을 파싱하는 샘플코드	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	791
5177	JavaScript	자바스크립트로 ctrl+F기능과 유사한 웹페이지내 문자검색기능 작성 [1]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1485
5176	PHP	PHP로 숫자캡챠 이미지 생성하기 [2]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1181
5175		라이트세일 리소스 문제 알림	리오닥터 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	564
5174	기타	selenium 네이버 카페 게시판 제일 첫번째 글 선택하기 [3]	라균 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	809
5173	PHP	$_SERVER 명려어중에서... [5]	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	964
5172	PHP	소스 코드가 이상하게 변질되어서 파일 기부[ No Bug 파일 완전판] [7]	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1251
5171	기타	팁 다운 팁좀 씁시다. [8]	그누GPT 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1552
5170	PHP	사이트 정보(파비콘, 제목, 설명) 가져오는 함수	친절한태엽씨 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1047
5169	PHP	xampp의 phpmyadmin 암호 처리 끝내기.	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1222
5168	PHP	스크립트 해킹 방어 구문 간단 셀프 작성한 것인데... 웬지 쎈 소스 [3]	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1194
5167	JavaScript	지정한 범위내에서 랜덤으로 숫자출력하는 스크립트 [3]	안드류KIM 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	993
5166	MySQL	배너 노출 관련 쿼리 [4]	하얀감자 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1182
5165	MySQL	이진 트리 순회... 무한 계층형 트리 [2]	스팸마요 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1249
5164	PHP	1에서 45까지 랜덤이면서 연속 숫자도 가능한 소스 [3]	하늘뚱 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1498
5163	OS	리눅스 퍼미션에 무조건. 7계열을 써야 패키지 실행된다?	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	839
5162	웹서버	phpmyadmin config.inc.php 않건드리고 사용자 생성(구닥다리정보일수도?)	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	887
5161	웹서버	REWRITE 설계도 해주는 사이트 [3]	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	972
5160	PHP	멤버십 탈퇴할때 탈퇴문구 넣기 그러나 왜 단일?	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	842
5159	PHP	글은 화면에 차고. 카테고리길어져 카테고리는 그냥 화면만큼쓰고 싶고	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	901
5158	PHP	맨 앞글자만 크게 써먹게 하기.(네이트 뉴스 서비스 사용하다 보면 이해함)	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	909
5157	PHP	technote ipage를 다르게 구현 (소스가 같으려나....)	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	939