집 > 기사 > 웹 프론트엔드 > CSS3 border-radius를 사용하여 태극권과 사랑 패턴 그리기

CSS3 border-radius를 사용하여 태극권과 사랑 패턴 그리기

不言원래의: 2018-06-26 15:20:482171검색

CSS3의 테두리 반경은 호를 그리는 데 쉽게 사용할 수 있습니다. 둥근 직사각형을 만드는 데만 사용된다면 너무 낭비가 될 것입니다. 다음은 태극권과 사랑 패턴을 그리는 데 CSS3의 테두리 반경을 사용하는 예입니다. .필수 친구는

태극권 도표
border-radius를 참고하여 테두리를 둥글게 만드는 효과 외에도 일러스트를 그리면 실제로 다양한 창의적인 아이디어를 만들어 낼 수 있습니다. 저자는 오늘도 태극권 그림 그리는 법을 가르쳐드리기 위해 계속해서 활용하겠습니다.

소스 코드 보기 HTML

<body>
 <p class="taichi">
  <p class="white-circle"></p>
  <p class="black-circle"></p>
 </p>
</body>

태극권 다이어그램에 검은색과 흰색 원이 있으므로 블록에 p가 두 개 더 배치됩니다.

그럼 눈을 크게 뜨고 자세히 살펴보세요. 저자는 먼저 큰 블록을 흰색과 검정색으로 나눕니다.

소스 코드 보기 CSS

.taichi {   
 position: relative;   
 width: 48px; /* 50 - 2 */
 height: 96px; /* 100 - 2 - 2 */
 background: #fff;   
 border: 2px solid #000;   
 border-width: 2px 50px 2px 2px;   
 border-radius: 50%;   
}

일반 상자 모델(Box Model)은 다음과 같이 계산됩니다. 블록 너비와 높이의 테두리 너비이므로 너비와 높이가 100×100인 블록을 만들고 싶지만 테두리 너비가 2픽셀인 경우 내부 부분은 96픽셀만 되어야 합니다. 특별한 점은 작성자가 오른쪽 테두리의 너비를 50px로 직접 설정했기 때문에 블록 내부의 너비는 48px만 필요하다는 것입니다.

이렇게 설정하고 테두리 반경 둥근 모서리 효과를 추가하면 ~
2016517110833210.png (120×120)

헤헤~ 검정색과 흰색 블록이 있고 먼저 흰색 원을 추가합니다.

소스 보기 code CSS

.white-circle {   
 position: absolute;   
 top: 0;   
 left: 50%;   
 background: #fff;   
 border-radius: 50%;   
 width: 48px;   
 height: 48px;   
}

여기서는 완전한 흰색 원이 직접 생성되어 상반부 중앙에 배치됩니다:
2016517110925477.png (120×120)

검은색 원이 하반부에 배치됩니다:

소스 코드 보기 CSS

.black-circle {   
 position: absolute;   
 top: 50%;   
 left: 50%;   
 background: #000;   
 border-radius: 50%;   
 width: 48px;   
 height: 48px;   
}

것 같습니다 이미 9개의 이미지가 있습니다~
2016517110953720.png (120×120)

마지막으로 이 두 원에는 여전히 반대 색상의 작은 점이 두 개 있습니다. 이 두 개의 작은 점에 대해서는 의사 요소(Pseudo -elements) 뒤에만 사용하면 됩니다. 그게 전부입니다:

소스 코드 보기 CSS

.white-circle::after {   
 content: "";   
 position: absolute;   
 top: 17px; /* (50-16)/2 */
 left: 17px; /* (50-16)/2 */
 background: #000;   
 border-radius: 50%;   
 width: 16px;   
 height: 16px;   
}   
.black-circle::after {   
 content: "";   
 position: absolute;   
 top: 17px; /* (50-16)/2 */
 left: 17px; /* (50-16)/2 */
 background: #fff;   
 border-radius: 50%;   
 width: 16px;   
 height: 16px;   
}

를 보세요~ 놀랍지 않나요! ?
2016517111042392.png (120×120)

Love
위에서는 테두리 반경을 사용하여 태극권 다이어그램을 그리는 방법을 가르치고 다음에서는 둥근 모서리 효과를 사용하여 하트를 그리는 방법을 알려줍니다.

p 블록만 필요합니다:

<body>
 <p class="heart"></p>
</body>

그런 다음 블록의 너비와 높이를 지정합니다:

소스 코드 보기 CSS

.heart {   
 position: relative;   
 width: 140px;   
 height: 115px;   
}

심장을 왼쪽과 오른쪽 블록으로 나누는 것도 마찬가지입니다. first:: 왼쪽에 블록을 생성하는 의사 요소 이전:

소스 코드 보기 CSS

.heart::before {   
 content: "";   
 position: absolute;   
 left: 70px;   
 top: 0;   
 width: 70px;   
 height: 115px;   
 background: red;   
 border-radius: 50px 50px 0 0;   
}

왼쪽 위와 오른쪽 위 둥근 모서리만 설정되어 있으므로 둥근 기둥이 됩니다.
2016517111117036.png (200×200)

그런 다음 회전 중심점을 변경하여 왼쪽으로 45도 회전하려고 합니다.

소스 코드 보기 CSS

.heart::before {   
 content: "";   
 position: absolute;   
 left: 70px;   
 top: 0;   
 width: 70px;   
 height: 115px;   
 background: red;   
 border-radius: 50px 50px 0 0;   
 -webkit-transform: rotate(-45deg);   
 -moz-transform: rotate(-45deg);   
 -o-transform: rotate(-45deg);   
 transform: rotate(-45deg);   
 -webkit-transform-origin: left bottombottom;   
 -moz-transform-origin: left bottombottom;   
 -o-transform-origin: left bottombottom;   
 transform-origin: left bottombottom;   
}

transform-origin은 요소의 중심점을 변경할 수 있습니다. background-position과 마찬가지로 두 가지 값을 허용합니다. 첫 번째는 가로 값을 설정하는 것이고 두 번째는 세로 값을 설정하는 것입니다. 기본값은 중심 중심인데 이제 왼쪽 아래로 변경합니다.
2016517111144455.png (200×200)

오른쪽 부분은 동일하지만 회전 중심점을 오른쪽 아래로 변경하고 오른쪽으로 회전합니다.

원본 코드 보기 CSS

.heart::after {   
 content: "";   
 position: absolute;   
 top: 0;   
 left: 0;   
 width: 70px;   
 height: 115px;   
 background: red;   
 border-radius: 50px 50px 0 0;   
 -webkit-transform: rotate(45deg);   
 -moz-transform: rotate(45deg);   
 -o-transform: rotate(45deg);   
 transform: rotate(45deg);   
 -webkit-transform-origin: rightright bottombottom;   
 -moz-transform-origin: rightright bottombottom;   
 -o-transform-origin: rightright bottombottom;   
 transform-origin: rightright bottombottom;   
}

양면이 생성되면 밝은 빨간색 하트가 나타납니다.
2016517111209126.png (200×200)

뭐~ Zhonghe의 Zhong 선생님이 왜 움직일 수 없냐고 물으셨는데... 상관없습니다. 애니메이션을 추가하겠습니다. . 효과 부여:

소스 코드 보기 CSS

.heart {   
 -webkit-animation: jump 1s infinite ease-out;   
 -moz-animation: jump 1s infinite ease-out;   
 -o-animation: jump 1s infinite ease-out;   
 animation: jump 1s infinite ease-out;   
}   
@-webkit-keyframes jump {   
 0%, 60%, 75%, 90%, 100% {   
  -webkit-transform: scale(1);   
 }   
 15% {   
  -webkit-transform: scale(0.6);   
 }   
 30% {   
  -webkit-transform: scale(1);   
 }   
 45% {   
  -webkit-transform: scale(0.7);   
 }   
}   
@-moz-keyframes jump {   
 0%, 60%, 75%, 90%, 100% {   
  -moz-transform: scale(1);   
 }   
 15% {   
  -moz-transform: scale(0.6);   
 }   
 30% {   
  -moz-transform: scale(1);   
 }   
 45% {   
  -moz-transform: scale(0.7);   
 }   
}   
@-o-keyframes jump {   
 0%, 60%, 75%, 90%, 100% {   
  -o-transform: scale(1);   
 }   
 15% {   
   -o-transform: scale(0.6);   
 }   
 30% {   
  -o-transform: scale(1);   
 }   
 45% {   
  -o-transform: scale(0.7);   
 }   
}   
@keyframes jump {   
 0%, 60%, 75%, 90%, 100% {   
  transform: scale(1);   
 }   
 15% {   
  transform: scale(0.6);   
 }   
 30% {   
  transform: scale(1);   
 }   
 45% {   
  transform: scale(0.7);   
 }   
}

변환 크기(x, y)를 사용하여 하트 크기를 변경하여 전체 애니메이션이 펑펑 점프하는 것처럼 보이도록 합니다.
2016517111241939.gif (200×200)

위 이것이 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보시려면 PHP 중국어 웹사이트를 주목해주세요!

CSS3 border-radius를 사용하여 태극권과 사랑 패턴 그리기

관련 기사