페이지 로딩 애니메이션

솔루션개발

· 1년 전 · 조회 700 700

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

글쓰기

번호	분류	제목	글쓴이	날짜	조회
5216		Laravel 오유 "failed to open stream: Permission denied" 퇴치방법 [1]	슈퍼디브 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	950
5215		php 몇분전, 몇시간전, 몇일전 함수 [6]	그누소스 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1082
5214		내 계정 파일, DB 백업 스크립트	진서기 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	722
5213	PHP	PHP 배열순설정 [1]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	668
5212	PHP	PHP로 PDF파일 다루기 [4]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1692
5211	PHP	PHP를 사용하여 FTP를 이용하는 방법 [1]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1453
5210	PHP	PHP와 MSSQL의 연동 코드 실례 [1]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	2141
5209	PHP	객체로 간단한 부트스트랩 매뉴 제작 함수	식물집사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	691
5208	JavaScript	jQuery없이 네티브자바스크립트로 서버에 요청보내기 7 - JSONP [5]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	828
5207	JavaScript	jQuery없이 네티브자바스크립트로 서버에 요청보내기 6- CORS [1]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	680
5206	JavaScript	jQuery없이 네티브자바스크립트로 서버에 요청보내기5- 파일업로드 [1]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	604
5205	PHP	include와 DB해킹. 그러나 Fopen의 r 옵션만? 트릭으로 쓴다면? [1]	piadream 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	694
5204	기타	자동방지문자가 안보이는 경우 - 유블럭	techstar 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	749
5203	JavaScript	jQuery없이 네티브자바스크립트로 서버에 요청보내기4 - JSON	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	575
5202	JavaScript	jQuery없이 네티브자바스크립트로 서버에 요청보내기3 - URL Encoding [3]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	603
5201	JavaScript	jQuery없이 네티브자바스크립트로 서버에 요청보내기2 - POST	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	666
5200	JavaScript	jQuery없이 네티브자바스크립트로 서버에 요청보내기1 - GET [2]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	856
5199	JavaScript	express로 간단한 부트스트랩 내비게이션 메뉴 생성기(아주 쉬움)	식물집사 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	619
5198	기타	C#에서 WWW-Authenticate를 통과하는 방법	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	650
5197	PHP	PHP로 채트서버 만들기	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	730
5196	JavaScript	ThreeJS로 3디 지구 만들기	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	595
5195	PHP	PHP에서 파일다운로드기능 구현하기	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	2050
5194	PHP	PHP 랜덤생성하기	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	610
5193	기타	cmd, powershell 명령 몇가지	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	660
5192	MySQL	DB백업코드 [5]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1381
5191	JavaScript	숫자에 천단위로 콤마(,) 찍기 [11]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1070
5190	PHP	PHP CURL로 사이트 로그인 하고 그 정보 유지하기 [1]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1922
5189	MySQL	utf8mb4_unicode_ci와 utf8mb4_general_ci의 차이점 [3]	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	6182
5188	node.js	운영중인 서비스가 알지못할 에러(uncaughtException)발생으로 중지되지 않게 하기	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	1040
5187	node.js	nodejs 에서 CSV파일 파싱하여 배열로 변환하기	swallow 프로필 보기 이 회원 글보기 이 회원의 댓글보기	2년 전	786

Laravel 오유 "failed to open stream: Permission denied" 퇴치방법 [1]

슈퍼디브

페이지 로딩 애니메이션

댓글 작성

게시판 목록

개발자팁

Laravel 오유 "failed to open stream: Permission denied" 퇴치방법 [1]

php 몇분전, 몇시간전, 몇일전 함수 [6]

내 계정 파일, DB 백업 스크립트

[PHP] PHP 배열순설정 [1]

[PHP] PHP로 PDF파일 다루기 [4]

[PHP] PHP를 사용하여 FTP를 이용하는 방법 [1]

[PHP] PHP와 MSSQL의 연동 코드 실례 [1]

[PHP] 객체로 간단한 부트스트랩 매뉴 제작 함수

[JavaScript] jQuery없이 네티브자바스크립트로 서버에 요청보내기 7 - JSONP [5]

[JavaScript] jQuery없이 네티브자바스크립트로 서버에 요청보내기 6- CORS [1]

[JavaScript] jQuery없이 네티브자바스크립트로 서버에 요청보내기5- 파일업로드 [1]

[PHP] include와 DB해킹. 그러나 Fopen의 r 옵션만? 트릭으로 쓴다면? [1]

[기타] 자동방지문자가 안보이는 경우 - 유블럭

[JavaScript] jQuery없이 네티브자바스크립트로 서버에 요청보내기4 - JSON

[JavaScript] jQuery없이 네티브자바스크립트로 서버에 요청보내기3 - URL Encoding [3]

[JavaScript] jQuery없이 네티브자바스크립트로 서버에 요청보내기2 - POST

[JavaScript] jQuery없이 네티브자바스크립트로 서버에 요청보내기1 - GET [2]

[JavaScript] express로 간단한 부트스트랩 내비게이션 메뉴 생성기(아주 쉬움)

[기타] C#에서 WWW-Authenticate를 통과하는 방법

[PHP] PHP로 채트서버 만들기

[JavaScript] ThreeJS로 3디 지구 만들기

[PHP] PHP에서 파일다운로드기능 구현하기

[PHP] PHP 랜덤생성하기

[기타] cmd, powershell 명령 몇가지

[MySQL] DB백업코드 [5]

[JavaScript] 숫자에 천단위로 콤마(,) 찍기 [11]

[PHP] PHP CURL로 사이트 로그인 하고 그 정보 유지하기 [1]

[MySQL] utf8mb4_unicode_ci와 utf8mb4_general_ci의 차이점 [3]

[node.js] 운영중인 서비스가 알지못할 에러(uncaughtException)발생으로 중지되지 않게 하기

[node.js] nodejs 에서 CSV파일 파싱하여 배열로 변환하기