안녕하세요 가능하면 모든 CSS를 사용하여 배경 이미지를 내 웹 사이트로 페이드 인하려고합니다. 사용자가 홈페이지를 방문 할 때 이미지가 페이드 인되기를 원합니다. 그렇게하기 위해 jquery 또는 javascript를 추가하지 않으면 문제가 발생합니다. 내 코드는 다음과 같습니다.
<!doctype html>
<html>
<head>
<title>Paradox Entertainment</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body {
margin:0;
font-family:arial,helvetica,sans-serif;
background-image:url("images/2_petski.jpg");
background-position: center;
background-repeat: no-repeat;
background-color:#000000;
color: #ffffff;
padding: 350px;
}
ul {
list-style: none
}
</style>
</head>
<body>
</body>
</html>
어떤 종류의 리소스 나 코드 도움을받을 수 있으면 미리 감사드립니다.
동일한 코드로 Pure CSS 에서 할 수 있다고 생각합니다 . 다음 바이올린이 당신을 위해 작동합니까? 타이밍 기능을 사용하여 지연을 변경할 수 있습니다. 현재는 4 초입니다.
.fadeImage {
-webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 4s; /* Firefox < 16 */
-ms-animation: fadein 4s; /* Internet Explorer */
-o-animation: fadein 4s; /* Opera < 12.1 */
animation: fadein 4s;
display: block;
margin: 25px auto;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
} <img src="https://i.stack.imgur.com/d4lWr.jpg" alt="Image" class="fadeImage" />이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다