CSS3 진행률 표시줄을 만들어 먹읍시다.🍭

너는 아직도 사탕을 먹는 사람이니?줄무늬의🍭 응, 나는 어렸을 때 그것들을 매우 좋아했어.그럼 저는 지금 뭘 좋아해요?나는 CSS를 좋아한다.🤩
우리 합시다.우리는 달콤한 줄무늬 사탕 줄기를 진도 줄기로 바꿀 것이다.... 때문에솔직히 기본 HTML <progress> 은 엉망입니다.이거 봐라...

우리는 그것을 더 달콤한 버전으로 바꿀 수 있다. 필요 없다<progress>.자극적으로 들리는데?우리 잠수하자!

잃어버린 영광을 사탕에 돌려줄 때가 됐어요.🥺

먼저 HTML을 완성합니다.🤪

... 때문에응, 뭘 입어야 돼?우리가 실현하고자 하는 것은 다음과 같은 가재/회전 설탕 덩어리이다.

만약 네가 안경을 끼고 관찰한다면, 너는 우리가 이 일을 완성하기 위해 두 가지 차원이나 요소가 필요하다는 것을 발견할 수 있을 것이다.우선 봉틀 원소, 그 위의 원소는 빨간색의 실제 사탕봉이다.이것이 바로 우리의 출발점이다.

<div>
  <span></span>
</div>

div는 우리의 지지대이며, 우리는 그것을 내연 용기로 만들 것이다.Chrome 개발 도구의 모양을 보려면 다음과 같이 하십시오.
span
피부 색깔의 원소는 우리의div로 파란색의 경계가 그 위에 있다.

사탕처럼 보이게.🍭

재미있는 일이 왔다.먼저 div 클래스 하나를 CSS에서 스타일링해야 하는 부분입니다.

.loading-bar {
  position: relative;
  margin: 0 auto;
  height: 50px;
  width: 30%;
  border-radius: 50px;
}

현재, loading-bar 포지셔닝은 여기에서 선택할 수 있습니다. 왜냐하면 우리는 relative, top, left 또는 bottom 속성 설정 값으로 포지셔닝을 명확하게 하지 않기 때문입니다.우리는 단지 문서right의 중심에 놓고 위쪽과 아래쪽body을 margin, 왼쪽/오른쪽0으로 설정할 뿐이다.기본값 auto 과 width 을 설정하는 것은 필요합니다. 이 값이 없으면div를 볼 수 없습니다. 이 값은 원하는 항목의 크기에 따라 어떤 값이든 사용할 수 있습니다.아름다운 원형height도 로드스틱 모양으로 만드는 좋은 선택이다.
기술적으로div와body 요소의 색깔은 기본적으로 흰색이기 때문에 당신은 지금 아무것도 볼 수 없습니다.div에 border 를 추가하면 기본 브래킷을 얻을 수 있습니다.
다음은 유행하는 사탕 줄무늬를 추가해야 한다. 이런 스타일background-color: orangered;에 대해서는 다음과 같다.

span {
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 50px;
  background-image: linear-gradient(to bottom, #fac4c0, #f60000 60%);
  box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  overflow: hidden;
}

블록 디스플레이는 블록 스타일의 요소 상자가 경계 전후에 같은 공간을 가지고 있는지 확인합니다.이번에는 부모 대상의 100% 면적 (즉div) 을 필요로 하기 때문에 너비, 높이, 경계 반경의 상응하는 값을 줍니다. 값을 span 로 설정하면 추가 요소는 경계에서 잘립니다.
그럼에도 불구하고, 당신은 아무것도 볼 수 없다. (우리는 약간의 색깔을 추가해야 한다! 우리는 180도 각도의 overflow 를 사용하여 이 점을 실현한다.밝은 빨간색hidden은 전체 그래디언트 값의 60%를 차지한다.네가 이렇게 할 때, 너는 우리의 적재기에 사다리가 있는 것을 볼 수 있을 것이다.

선형 사다리 완전 옵션...

좀 더 깊이 있게 해서 사탕처럼 보일 때가 되었다.우리는 두 개의 음영 값을 추가합니다.첫 번째는 맨 위에 흰색 그림자를 추가하고, 두 번째는 밑에 검은색 그림자를 추가합니다.주요한 점은 사용#f60000이 필요하기 때문에 그림자가 한쪽에서 오는 것처럼 보인다는 것이다.이러한 유형의 그림자는 컨테이너 내에 그려집니다.

스트라이프 추가!🌈

우리 거의 다 왔어!줄무늬가 없는 사탕은 나에게 매우 보기 싫다.이를 위해서는 CSS의 위조 요소 에 대한 이해가 필요합니다. inset 파일에 따라 다음을 수행합니다.

In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

그것은 어떻게 우리를 도울 것입니까?좋아, 우리는::after! 테이프 위조 원소 만들기!

span:after {
  content: "";
  position: absolute;
  top: 0px; left: 0; bottom: 0; right: 0;
  background-image: linear-gradient(
    -45deg, 
    rgba(255, 255, 255, .2) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%, 
    transparent 75%, 
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}

모든 위조 원소는 반드시 Mozilla Developer Network (MDN) 속성을 가지고 있어야 한다.내용의 가치가 무엇이든지 간에 그것은 새로 생성된 가치로 이 요소를 대체할 것이다.추가::after하면 이전에 표시한 div가 현재 "로 바뀝니다.🍬".Sweet? 그러나 우리는 새로 만든:::after 요소에 어떤 내용이 포함되기를 원하지 않습니다. 범위에 표시되고 완전히 쓸모가 없습니다... 아무것도 추가하지 않는 한 말입니다. 이것이 바로 우리가 content 만 사용하는 이유입니다.
스트라이프 마법 시작!우리는 content: "🍬"; 속성을 사용하여 큰 사다리를 추가합니다.한 번에 디코딩해 봅시다.

' ': 사다리가 기울어진 각도입니다.

background-image: 흰색 (값 255는 rgb 형식의 흰색을 나타냅니다.2 불투명도로 한다.25%는 전체 원소에서 차지하는 면적이다.

-45deg: 색깔의 투명도, 면적이 전체 면적의 25%를 차지한다.

우리는 세 가지 주요 가치관에 주목한다.만약 네가 이것만 사용한다면 큰 변화는 없을 것이다.이제 스트라이프 패턴을 자세히 살펴보면...
rgba(255, 255, 255, .2) 25%
...같은 위치에서 여러 색상이 멈추면 첫 번째에서 마지막 단계로 전환되는 것을 볼 수 있습니다.그 결과 색깔이 평온하게 과도하는 것이 아니라 그 위치에서 갑자기 바뀌었다.이 모든 것은 가능합니다. CSS3의 속성 지원 transparent 25% 에서 지정한 색이 멈추기 때문입니다.
이것이 바로 왜 전체 경계 내에서 몇 번 반복된 후(이번에는 절대 포지셔닝을 사용하는 것을 잊지 마세요), 우리는 우리의 사탕에 매우 적합한 줄무늬 도안을 얻었습니다!
전체 원소의 절반 기본값W3C's draft은 너비와 높이의 50%로 합리적인 것 같다.또한 모든 네 방향에서 넘침과 특정한 background-image 속성을 부모div로 사용할 수 있도록 용기 안에서 이 줄무늬를 만들어야 한다.

배경 크기 애니메이션 제작!🎬

진정한 불러오기는 지금부터 시작합니다.새로 만든::after 요소를 선택하고 border 클래스를 만들고 그 아래의 경계를 선택하십시오.animate 애니메이션의 지속 시간을 정의하고 무한 실행합니다.

.loading-bar > span:after, .animate > span > span { 
  animation: load 1s infinite;
}

지금 이거 쉬워요.우리가 애니메이션화하고자 하는 것은 줄무늬의 위치다.처음에div는 그 위치에 잠겨 있고 줄무늬는 위에서 움직여 배경에 뭔가가 불러오는 것 같다는 것을 나타낸다.

@keyframes load {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}

우리는 각각 0부터 너비와 높이의 50px까지 시작한다.저기 있다!얼마나 달콤해 보이는데.🤤
다음은 이 사탕 캐리어를 실현하는 코드펜입니다.
그럼 누가 사탕을 먹을 준비를 했습니까?👀

다음 단계는 어디로 갑니까?🤔

소란 피우다이번에 우리는 방금 가재기를 만들었는데, 진정한 사탕'진보'봉을 만드는 것이 어떻습니까?이번에는 줄무늬가 받침대 위에서 이동하고 왼쪽에서 오른쪽으로 이동하는데 마치 그것이 적재된 것 같다.이것이 바로 내가 말하고자 하는 것이다.

만약 네가 계속 이걸 하고 있다면 걱정하지 말고 내가 한 것을 봐라.
읽어 주셔서 감사합니다.오늘 하루 즐겁게 보내세요.(✿◕‿◕✿)

Have you tried using Microsoft Docs yet?

We're not saying it'll change the way you program but at the same time we're not saying it won't. 😉

Check it out: https://t.co/4o3bkwcdoq

Image source: https://t.co/h1wgHdR7Uc pic.twitter.com/TPl6vZCc5Z

— Microsoft Developer UK (@msdevUK)

코드 펜 예

📫 Subscribe to my weekly developer newsletter 📫
PS: 올해부터 저는 이곳에 지역사회 개발에 관한 글을 쓰기로 했습니다.전에 언론에 썼어요.내 글을 보고 싶은 사람이 있다면, 내 미디어 자료다.