더하기 기호 효과를 얻기 위한 순수 CSS(코드 예)

이 글의 내용은 순수 CSS(코드 예제)에 더하기 기호를 추가하는 효과에 대한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

아래 그림에서 더하기 기호 효과를 얻으세요:

이 효과를 얻으려면 p 요소만 있으면 됩니다.

전, 후, 테두리 기능에는 CSS를 사용해야 합니다.

먼저 div 노트를 설정하고

<div></div>

테두리를 설정합니다:

.add {
  border: 1px solid;
  width: 100px;
  height: 100px;
  color: #ccc;
  transition: color .25s;
  position: relative;
}

이때 테두리는 다음과 같습니다:

이전에 의사 클래스를 사용하고 테두리 상단을 사용하여 설정할 수 있습니다. a "horizontal":

.add::before{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 80px;
  margin-left: -40px;
  margin-top: -5px;
  border-top: 10px solid;
}

우리는 절대 위치 지정을 사용했습니다. 이때 다음과 같이 됩니다:

위를 참조하면 after pseudo-class와 border-bottom을 사용하여 "세로"를 설정할 수 있습니다.

.add::after {
 content: '';
 position: absolute;
 left: 50%;
 top: 50%;
 height: 80px;
 margin-left: -5px;
 margin-top: -40px;
 border-left: 10px solid;
}

hover pseudo-class를 추가하여 설정합니다. 마우스를 위로 올리면 색상이 변경됩니다.

최종 스타일:

마우스를 위로 올리면 색상이 변경됩니다.

위 내용은 더하기 기호 효과를 얻기 위한 순수 CSS(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!