페이지 로딩 애니메이션

솔루션개발

· 1년 전 · 조회 712 712

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

글쓰기

번호	분류	제목	글쓴이	날짜	조회
5336		오라클 무료 티어 또는 AWS 대한민국 리전에서 클라우드플레어 사용시 사이트 속도 느림	푸른악마 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	958
5335		간단한 스크롤 진행률 표시기 구현하기 2 [2]	김서훈 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	980
5334		간단한 스크롤 진행률 표시기 구현하기 [4]	김서훈 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	892
5333		nprogress bar&Circle 수정본 입니다.	들레아빠 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	719
5332		도커(docker) 웹관리 프로그램인 dockge 설치 및 사용방법 [7]	바다클라우드 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	3648
5331		aws라이트세일에 그x보드 설치 [5]	뽕엄능브라 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1675
5330		2개 이상의 button 누르면 각 ifrme 으로 페이지 열기 [3]	해피정 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1334
5329		불펌금지 자바스크립트 [18]	GREENnBLUE 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	2656
5328		러시아 이용자들을 효과적으로 차단하기 [8]	Tak2 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	2461
5327		그누보드 폰에서 돌리기 (Termux) [19]	Tak2 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	3651
5326		F12 키를 쉽게 비활성화 시키기 [2]	시리즈8 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1553
5325	JavaScript	글자수 제한 가장 쉬운판.중 하나	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	692
5324	OS	aws 아이피 모조리 차단하기 -웹호스팅 사용자는 불가- [1]	길가던분 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	759
5323	PHP	포럼 출력소스 [ 샘플본 ]	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	900
5322	PHP	게시판별 카테고리 만들기.	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	796
5321	PHP	댓글이나 답글은 로직이 같다.	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	657
5320	PHP	카테고리 만드는 예제.	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	758
5319	PHP	엑셀로 EXPORT 할때 사용하기 좋은 방법	techstar 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	805
5318	JavaScript	문구 복사하기 자바스크립트	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	672
5317	PHP	그룹의 그룹내 사용자가 전체 메시지 보내기.	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	616
5316	PHP	사용자 그룹 통합 해제(해제는 삭제)	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	580
5315	PHP	랜덤값 만들기 겹치기는	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	690
5314	PHP	만들고 보니 카톡의 단톡방 톡방 패러디 .....	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	669
5313	PHP	그누보드로 다중검색을 구현해보니..	techstar 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	769
5312	정규표현식	정규표현식 쉽게 이해하는 방법 좀 가르켜주세요	linlinHuang 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	646
5311	JavaScript	페이지 로딩 애니메이션 현재 보는 글	솔루션개발 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	713
5310	PHP	docker 활용한 php 환경 구성 [10]	Laraveler 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	2125
5309	PHP	데이타 1개 가져오기 [5]	techstar 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1614
5308	PHP	제목(wr_subject)를 안짤리게 하려면..	techstar 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	679
5307	node.js	사진에서 배경을 제거하고 다른 배경이미지와 합성하는 서비스 [5]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	1년 전	1432