리본 올리기 효과를 구현하는 순수 CSS

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를 음수로 설정하고 값은 다음과 같습니다. aspan보다 높은 값이 나올 수 있을까요?
안돼!

첫 번째의 경우 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;
}

                                     

액션을 사용하여 hover의 p을 변경하여 작은 모듈을 위로 올리고 동시에 대각선으로 나누어진 두 부분을 아래에 배치합니다. 작은 모듈의 뒷부분 작은 모듈을 기준으로 절대적으로 위치하는 두 가지 색상의 사각형은 간단한 3차원 상승 효과를 만들 수 있습니다. margin-top
을 이용해서 리본의 양쪽 끝과 떠오르는 그림자 부분을 구현해 보세요. border

---

그런데 주의해야 할 사항이 하나 있습니다.

내비게이션 바인 경우
안에 p 태그를 넣고, a를 넣어주세요. 이전에는 불필요하다고 생각했는데, 알고보니 a 태그가 매우 유용하네요. spanspan가
보다 높아야 하고, 그러면 a이 노출되어서는 안 되는 마법의 부분을 가려주고, 노출되어야 할 부분을 남겨줄 수 있기 때문이다. span 그런 다음 overflow:hidden,
및 span은 p:before을 양수로 설정해야 하며 p:after의 값은 margin-top보다 높은 margin-top의 값과 정확히 같습니다. aspan 이동 시
설정하고 걸어가세요. hover 그러면 margin-top:0px;,
, span에는 p:before을 설정하지 않고 p:after가 움직일 때 margin-top를 음수로 설정하고 값은 다음과 같습니다. hovermargin-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 중국어 웹사이트에서 관련 기사를 주목하세요!