버튼이 있습니다. 사용자가 버튼을 클릭 할 때 의사 콘텐츠를 사용하여 버튼에 "틱"표시를 추가하면 :before제대로 작동합니다.
하지만 2 초로 해당 :before속성 을 제거해야합니다 fadeOut(). 그렇게 할 수 있습니까?
다음은 내 버튼 CSS 코드입니다.
button{
border: 1px solid #1f85c3;
height: 30px;
color: #fff;
padding: .4em 1em !important;
background-image: linear-gradient(#1f96d0, #007cc2);
position: relative;
display: block;
padding-right: 30px !important;
}
클릭하면 클래스 이름을 추가하고 있습니다 right.
button.right:before{
content: '';
position: absolute;
top: 50%;
right: 0%;
margin: -7px 0 0 -10px;
height: 5px;
width: 16px;
border: solid #FFF;
border-width: 0 0 5px 5px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
}
조언을 부탁드립니다.
right클릭시 클래스를 추가 :before하기 때문에 버튼에 대한 빈 의사 요소를 만들고 전환을 사용할 수 있습니다.
button:before{
content:'';
opacity:1;
transition:opacity 2s linear;
}
규칙에 추가 opacity:0하십시오 button.right:before.
button.right:before{
content: '';
position: absolute;
top: 50%;
right: 0%;
margin: -7px 0 0 -10px;
height: 5px;
width: 16px;
border: solid #FFF;
border-width: 0 0 5px 5px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
opacity:0;
}
http://jsfiddle.net/SYQ89/의 데모
( 전환에 대한 표준 속성 만 추가했습니다. 필요한 경우 공급 업체별 접두사를 추가해야합니다. )
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다