CSS3 배경 이미지 위치 전환

내 웹 사이트 로고에 CSS3 호버 효과가 필요합니다. 진정해? 잘 작동하지만, 내가 원하는 방식은 아닙니다.CSS3 배경 이미지 위치 전환

그것의 위쪽 절반은 일정한 상태이며, 하부 절반이다 상태를 가져.

나는 배경 위치를 변경하기위한 표준 CSS가 있습니다 : 호버 (hover)하지만, CSS3 전환은 이미지를 위치와 위아래로 슬라이드시킵니다. 대신, 나는 그것을 단순히 새로운 위치로 페이드 인 및 페이드 아웃하기를 원한다.

하나의 이미지와 두 개의 위치로 작업 할 때 가능합니까? 아니면 두 개의 개별 이미지를 만들어야합니까?

출처

2011-04-22 Sean

나는 두 가지를 생각합니다. CSS3는 JS를 대체하지 않습니다 ... – Blender

나는 정말로 이해하지 못합니다. 달성하려고 시도하고 있습니까, 아니면 실용적인 예를 들려 주시겠습니까 (아니면 적어도 조금 더 명확하게 해주십시오 - 이미지의 상단 절반 만 변경하거나 이미지가 페이드 아웃되고 새로운 이미지가 사라지기를 원합니 까?) ? – Maverick

내 상황을 설명하기위한 페이지를 만들었습니다. http://scferg.com/logoexamples.html – Sean

예는 가능하지만, 당신은 당신이 4 키 프레임

0% - opacity 1 
49% - opacity 0 
50% - move to new position, opacity 0 
100% - opacity 1

출처

2011-04-22 23:43:06

당신은 두 개의 별도의 이미지가 필요하지 않습니다와 CSS 애니메이션을 사용해야합니다 간단한 전환을 사용할 수 없지만 당신이 필요합니까 로고를 배치 할 두 가지 요소.

여기에 라이브 버전보기 : 실제로 http://jsfiddle.net/BdY79/

.logo { 
    width: 282px; 
    height: 69px; 
    background: #fff url(http://scferg.com/wp-content/themes/austere/images/logo.png) 0 -69px no-repeat; 
    overflow: hidden; 
} 

.logo img { 
    background-color: #fff; 
    -webkit-transition: opacity 200ms ease; 
    -moz-transition: opacity 200ms ease; 
    -o-transition: opacity 200ms ease; 
} 

.logo img:hover { 
    opacity: 0; 
}

, 당신은 아마 당신의 로고를 연결하려는 당신은이 작업을 수행 할 수있는 태그를 사용할 수 있으므로 불필요한 태그가 없습니다. 또한 우아하게 저하됩니다.

출처

2011-04-24 03:24:54 Duopixel

이 배경 위치 애니메이션을 언급하지 않습니다 ...

.box { 
    display:block; 
    height:300px; 
    width:300px; 
    background:url('http://lorempixum.com/300/300') no-repeat; 
    background-position:-300px; 
    -webkit-transition:background-position 1s ease; 
} 

.box:hover{ 
    background-position:0px; 
}

웹킷 만 :(

통해 여기 http://jsfiddle.net/hfXSs/

출처

2012-06-04 23:27:28 Foxinni

CSS3 배경 이미지 위치 전환

답변

관련 문제