순수 CSS3 효과 회전 풍차

오늘, 우리는 여전히 비교적 간단한 CSS3 애니메이션을 - 다채로운 풍차 바람 회전. 단지 CSS3 전체를 사용하여 이전 튜토리얼 등이 동적 효율성과,. 우리는 바람이 풍차 회전의 효과가 완료, 전통적인 생산 방법의 CSS 삼각형과 함께 몇 가지 일반적인의 CSS3 애니메이션 기법을 사용합니다 :

프런트 엔드 코드

HTML 코드 :

        <div id="effect-windmill">
            <div class="blade-container">
                <div class="blade-item"></div>
                <div class="blade-item"></div>
                <div class="blade-item"></div>
                <div class="blade-item"></div>
            </div>
            <div class="pole"></div>
        </div>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

CSS3 코드 :

#effect-windmill {
  position: relative;
  margin: auto;
  margin-top: 80px;
  width: 300px;
  height: 450px;
}

#effect-windmill > .blade-container {
  position: absolute;
  display: flex;
  flex-flow: column wrap;
  width: 300px;
  height: 300px;
  overflow: hidden;
  z-index: 20;
  animation: wind 10s linear 3s infinite;
  -webkit-animation: wind 10s linear 3s infinite;
}

#effect-windmill > .blade-container > .blade-item {
  width: 0;
  height: 0;
}

#effect-windmill > .blade-container > .blade-item:nth-child(1) {
  border-right: 150px solid transparent;
  border-bottom: 150px solid #e74c3c;
}

#effect-windmill > .blade-container > .blade-item:nth-child(2) {
  border-left: 150px solid transparent;
  border-bottom: 150px solid #e67e22;
}

#effect-windmill > .blade-container > .blade-item:nth-child(3) {
  border-right: 150px solid transparent;
  border-top: 150px solid #f1c40f;
}

#effect-windmill > .blade-container > .blade-item:nth-child(4) {
  border-left: 150px solid transparent;
  border-top: 150px solid #2ecc71;
}

#effect-windmill > .pole {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: 5px;
  height: 300px;
  background-color: #3498db;
  z-index: 10;
}

@keyframes wind {
  from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }
  to {
    transform: rotate(-3600deg);
    -webkit-transform: rotate(-3600deg);
    -moz-transform: rotate(-3600deg);
    -ms-transform: rotate(-3600deg);
    -o-transform: rotate(-3600deg);
  }
}
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

지식 추출

1. 풍차 회전 효과 여기 풍력 터빈 블레이드 주변 용기의 회전을 도와 효과를 달성하기 위하여 풍력 터빈 블레이드 키 프레임 용기 회전 속성 변화를 변환 후 CSS3의 애니메이션 속성을 사용하고.
2. 플렉스 레이아웃 CSS3를 사용하여 풍차 블레이드, 우리는 네 잎을 만들 수있는 스타일의 세트가 많은 코드 저장 소정의 위치에 도달 그래서, 플렉스 랩의 레이아웃을 설정합니다.
3. 우리는 개별적으로 각 블레이드에 스타일을 추가 할 때, n 번째 자녀 의사 클래스 선택기를 사용하여,이 선택의 가장 큰 장점은 각 블레이드 개별적으로 사용자 정의 클래스가 필요하지 않습니다, 당신은 단지 자신의 스타일 수에 따라 작성해야합니다.
4. CSS 종래 삼각형 삼각형 시뮬레이션 경계 특성의 폭을 크게 만드는 방법을 제공한다. 삼각형은 또한 생산 방법의 국경 삼각형에 대해 자세히 알아볼 수 있습니다 관심, 여기하고있다.