JQuery 호버 표 형식 디자인 애니메이션

Question

이 웹 사이트를 통해 나는 Compatibility 섹션에서이 멋진 애니메이션을 발견했습니다.

http://html5css3templates.com/themes/taketheplunge/templates/index.html#about

나는 그것을 구현하려합니다. 섹션 위로 가져 가면 디자인이 바뀝니다. 그러나 나는 아직도 그런 것을 디자인 할 수 없다. 누군가가 이걸 도와 줄 수 있습니까? 스타일 시트에

Answer 1

표시된 효과는 css3 전환을 사용하는 것입니다. transition 속성이 bar class이면 효과의 속도가 결정됩니다. 호버 CSS는 당신은 어떤 브라우저에서 개발자 도구의 웹 사이트에 대한 코드를 살펴 수 나머지

.bar{ 
    transition: all 0.6s ease-in-out 0s; 
} 
.compatibility:hover .percent80 { 
    width: 80%; 
} 

체크 아웃을 fiddle

Answer 2

이동합니다

.brideOverlay { 
    border: 5px solid rgba(242, 168, 181, 0.9); 
    border-radius: 50%; 
    box-shadow: 0 0 0 10px rgba(242, 168, 181, 0.3) inset; 
    width: 420px; 
    height: 420px; 
    transition: all 0.5s ease-in-out 0s; 
    margin-bottom: 30px; 
    position: absolute; 
} 
.brideOverlay h2{ 
    text-align: center; 
    padding-top: 190px; 
    opacity: 0; 
    transform: scale(0); 
    transition: all 0.8s ease-in-out 0s; 
} 
etc... 

이 일부 CSS3 코드입니다, 그래서 CSS3 intro를 보라 : http://html5css3templates.com/themes/taketheplunge/templates/css/layout.css 그리고 오버레이에 관한 섹션을 확인합니다.