>  기사  >  웹 프론트엔드  >  더하기 기호 "+" 효과를 달성하기 위한 순수 CSS(코드 예)

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

青灯夜游
青灯夜游앞으로
2020-06-13 10:24:283384검색

더하기 기호

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

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

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

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

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

먼저 div 노트를 설정하고

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

테두리를 설정합니다:

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

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

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

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

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

}

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

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

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

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

hover pseudo-class를 추가하고 색상을 설정합니다. 마우스 호버:

최종 스타일:

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

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

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

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

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

을 방문하세요.

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

성명:
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제