CSS3로 이미지 스크롤 효과를 얻는 방법(코드 포함)

CSS3는 이미지 스크롤 휠 효과를 구현합니다

평소에는 이미지 스크롤 효과를 사용하는데, 이는 모두 자바스크립트 코드(JQuery)로 구현되지만 Html5와 CSS3가 널리 보급된 요즘 시대에는 일부 자바스크립트가 자바스크립트 코드 대신 코드를 구현할 수 있습니다. 일반적인 효과는 웹페이지의 로딩 속도를 향상시키고 사용자 경험을 더욱 친숙하게 만드는 것입니다.

특히 WeChat 플랫폼 개발이 상대적으로 뜨거운 이 시대에는 동일한 효과를 위해 HTML5+CSS3로 대체하면 더욱 멋진 모바일 단말기 경험을 선사할 것입니다. 예를 들어 이 기사에서는 CSS3 이미지 스크롤 휠 효과를 소개합니다.

이 기사의 지식 포인트는 W3School 공식 문서 및 CSS3 @keyframes 규칙에서 나온 것입니다.

주소 링크: http://www.w3school.com.cn/css3/css3_animation.asp

문법 규칙:

@keyframes 
animationname
 {
keyframes-selector
 {
css-styles
;}}

애니메이션 이름은 개발자가 맞춤 설정한 애니메이션 이름이고, 키프레임 선택기는 애니메이션의 백분율입니다. 지속 시간(이동 속도를 제어할 수 있습니다).

원리: 작은 p 안에 큰 p가 중첩되어 있습니다. 작은 p는 표시할 단일 그림과 높이 및 너비가 같습니다. 큰 p 안에는 표시할 모든 그림이 포함되어 있습니다. 실행 프로세스에서는 큰 p의 수평 위치를 변경하여(매번 한 그림의 너비를 왼쪽 또는 오른쪽으로 이동) 그림 전환을 실현합니다.

Html 키 코드:

<p class="container">
 
<p class="img">
 
<ul class="nav">
 
<li><a href="#"><img src="imgs/logo.png"></a></li>
 
<li><a href="#"><img src="imgs/name.png"></a></li>
 
<li><a href="#"><img src="imgs/mmc.png"></a></li>
 
</ul>
 
</p>
 
</p>

CSS 스타일 키 코드:

.nav{
 
width:2000px;
 
height:150px;
 
position:absolute;
 
left:0px;
 
top:0;
 
z-index:9;
 
animation:myfirst 6s infinite;
 
-webkit-animation:myfirst 6s infinite;
 
-0-animation:myfirst 6s infinite;
 
-moz-animation:myfirst 6s infinite;
 
}
 
@keyframes myfirst
 
{
 
0%   {left: 0px;}
 
26.6%   {left: 0px;}
 
36.6%   {left: -320px;}
 
63.2%   {left: -320px;}
 
73.2%   {left: -640px;}
 
99.7%   {left: -640px;}
 
100% {left: -0px;}
 
}

표시 형식을 변경하려면 백분율(이미지 유지 시간 및 스크롤 속도)과 이동 거리를 조정해야 합니다.

CSS3 기술은 브라우저 호환성 문제를 고려하므로 브라우저마다 스타일을 작성해야 합니다. 이름은 이것으로 변경되며 나머지는 동일합니다.

@-o-keyframes myfirst

@-moz-keyframes myfirst

@-webkit-keyframes myfirst

스크롤 알고리즘 최적화 데모 보기

데모 데모 링크

http://wongletion.sinaapp.com/

이 기사는 https://blog.csdn.net/u013741507/article/details/38779093

추천 튜토리얼: "CSS Tutorial"

에서 복제되었습니다.

위 내용은 CSS3로 이미지 스크롤 효과를 얻는 방법(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!