hover
액션을 사용하여 p
의 margin-top
을 변경하여 작은 모듈이 위쪽으로 올라가도록 하는 동시에 작은 모듈의 엉덩이 아래 대각선을 따라 두 가지 색상으로 나누어진 사각형을 배치합니다. 작은 모듈을 기준으로 절대적으로 위치를 지정하면 간단한 3차원 상승 효과를 만들 수 있습니다.
border
을 이용해서 리본의 양쪽 끝 부분과 떠오르는 그림자 부분을 구현해 보세요.
하지만 주의해야 할 사항이 하나 있습니다:
내비게이션 바인 경우 p
안에 a
태그를 넣고, 그 안에 또 다른 a
태그를 넣으세요. span
태그 이전에는 불필요하다고 생각했는데, 알고 보니 span
가 매우 유용하네요. a
가 span
보다 높아야 하고, 그러면 overflow:hidden
이 노출되어서는 안 되는 마법의 부분을 가려주고, 노출되어야 할 부분을 남겨줄 수 있기 때문이다.
그런 다음 span
, p:before
및 p:after
은 margin-top
을 양수로 설정해야 하며 margin-top
의 값은 a
보다 높은 span
의 값과 정확히 같습니다. hover
이동 시 margin-top:0px;
설정하고 걸어가세요.
그러면 span
, p:before
, p:after
에는 margin-top
을 설정하지 않고 hover
가 움직일 때 margin-top
를 음수로 설정하고 값은 다음과 같습니다. a
span
보다 높은 값이 나올 수 있을까요?
안돼!
첫 번째의 경우 a
추가 부분이 올라가서 마법이 성공할 수 있는 상황은요. 너무 늦었나요? ,
내려가서 여분의 부분이 없어졌는지 확인해 보세요. a
말썽 피우는 걸 좋아하는 여자가 가장 인기가 많다는 사실이 입증됐어요!
<p> <a href="#"><span>青龙</span></a> <a href="#"><span>白虎</span></a> <a href="#"><span>玄武</span></a> <a href="#"><span>朱雀</span></a> </p>css 코드:
p{ width:500px; margin:200px auto 0px; } p:before{ content:""; border:25px solid; border-color:#ccc #ccc #ccc transparent; margin-top:10px; float:left; } p:after{ content:""; border:25px solid; border-color:#ccc transparent #ccc #ccc; margin-top:10px; float:left; } p span{ display:inline-block; width:100px; line-height:50px; margin-top:10px; text-align:center; background:#ccc; position:relative; transition: background-color 0.5s, margin-top 0.3s; } p a{ color:#000; text-decoration:none; height:60px; overflow:hidden; float:left; } p span:before{ content:""; border-right:10px solid #000; border-bottom:10px solid #ccc; position:absolute; top:50px; left:0px; } p span:after{ content:""; border-left:10px solid #000; border-bottom:10px solid #ccc; position:absolute; top:50px; right:0px; } p a:hover span{ margin-top:0px; background:#0cf; }
액션을 사용하여 hover
의 p
을 변경하여 작은 모듈을 위로 올리고 동시에 대각선으로 나누어진 두 부분을 아래에 배치합니다. 작은 모듈의 뒷부분 작은 모듈을 기준으로 절대적으로 위치하는 두 가지 색상의 사각형은 간단한 3차원 상승 효과를 만들 수 있습니다. margin-top
을 이용해서 리본의 양쪽 끝과 떠오르는 그림자 부분을 구현해 보세요. border
내비게이션 바인 경우
안에 p
태그를 넣고, a
를 넣어주세요. 이전에는 불필요하다고 생각했는데, 알고보니 a
태그가 매우 유용하네요. span
span
가
보다 높아야 하고, 그러면 a
이 노출되어서는 안 되는 마법의 부분을 가려주고, 노출되어야 할 부분을 남겨줄 수 있기 때문이다. span
그런 다음 overflow:hidden
,
및 span
은 p:before
을 양수로 설정해야 하며 p:after
의 값은 margin-top
보다 높은 margin-top
의 값과 정확히 같습니다. a
span
이동 시
설정하고 걸어가세요. hover
그러면 margin-top:0px;
,
, span
에는 p:before
을 설정하지 않고 p:after
가 움직일 때 margin-top
를 음수로 설정하고 값은 다음과 같습니다. hover
margin-top
보다 높은 값이 나올 수 있을까요? a
안돼! span
첫 번째 경우는
추가 부분이 올라가니까 마법이 성공할 수 있는 상황이군요. 어디가 너무 늦었나요? , 내려가서 여분의 부분이 없어졌는지 확인해 보세요. a
말썽 피우는 걸 좋아하는 여자가 가장 인기가 많다는 사실이 입증됐어요! a
html 코드:
<p> <a href="#"><span>青龙</span></a> <a href="#"><span>白虎</span></a> <a href="#"><span>玄武</span></a> <a href="#"><span>朱雀</span></a> </p>css 코드:
p{ width:500px; margin:200px auto 0px; } p:before{ content:""; border:25px solid; border-color:#ccc #ccc #ccc transparent; margin-top:10px; float:left; } p:after{ content:""; border:25px solid; border-color:#ccc transparent #ccc #ccc; margin-top:10px; float:left; } p span{ display:inline-block; width:100px; line-height:50px; margin-top:10px; text-align:center; background:#ccc; position:relative; transition: background-color 0.5s, margin-top 0.3s; } p a{ color:#000; text-decoration:none; height:60px; overflow:hidden; float:left; } p span:before{ content:""; border-right:10px solid #000; border-bottom:10px solid #ccc; position:absolute; top:50px; left:0px; } p span:after{ content:""; border-left:10px solid #000; border-bottom:10px solid #ccc; position:absolute; top:50px; right:0px; } p a:hover span{ margin-top:0px; background:#0cf; }
보다 순수한 CSS로 리본 올리기 효과를 얻으려면 PHP 중국어 웹사이트에서 관련 기사를 주목하세요!