css3 투명도 점차적 변화 실현

1765 단어

내가 신대륙을 발견한 것 같아, 하하...투명도 점차적인 효과를 내려고 인터넷에서 적당한 것을 찾지 못해 첫 번째 데모-webkit-transition: width 2s가 width를opacity로 바꾸자고 생각했는데 그 결과 css3만으로도 가능하다는 것이 이루어졌다.
첫 번째 데모.

### css3：
.floating-word{
            width: 200px;
            opacity: 0;
}
.ani{
            border: 1px solid salmon;
            transition:width 2s;
            -webkit-transition: width 2s;
            white-space: nowrap; /*   */
            overflow: hidden;
            text-overflow: ellipsis; /*          */
            background: transparent;
            color: black;
}

### html：

                   ，      


### js：

$(function(){
    $(".floating-word").mouseover(function(){
        $('.floating-word').addClass("ani");
        $(".floating-word").css("width",'300');
    })
})

최종 요구 사항 효과

### css
.floating-word{
            width: 200px;
            opacity: 0;
        }
        .ani{
            transition:width 2s;
            -webkit-transition: opacity 5s;
        }


### html:

            
                   ，      
        


### js:
$(function(){
                $(".floating-word").mouseover(function(){
                    $('.floating-word').addClass("ani");
                    $(".floating-word").css("width",'300');
                    $('.floating-word').css('opacity','1');
                })
            })

css만 사용하면 다음과 같은 내용을 추가합니다

.floating-word:hover{
            opacity: 1;
        }

단점: 마우스가 위로 이동하면 사라짐

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다