더하기 기호 '+' 효과를 달성하기 위한 순수 CSS(코드 예)

이 기사에서는 코드 예제를 통해 순수 CSS를 사용하여 더하기 기호 "+" 효과를 얻는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

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

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

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

먼저 div 노트를 설정하고

<div class="add"></div>

테두리를 설정합니다:

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

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

앞의 가상 클래스와 해당 테두리 상단을 사용하여 "수평"을 설정할 수 있습니다. ":

.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를 추가하고 색상을 설정합니다. 마우스 호버:

최종 스타일:

마우스를 호버하면 색상이 변경됩니다.

더 멋진 CSS3, html5, 자바스크립트 특수 효과 코드, 모두 포함: js 특수 효과 collection

더 많은 관련 튜토리얼을 보려면 CSS3 최신 버전 참조 매뉴얼

을 방문하세요.

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