이 기사에서는 코드 예제를 통해 순수 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!