Pure CSS3는 사실적인 다층 클라우드 애니메이션 특수 효과를 생성합니다.

　간단한 튜토리얼

　이것은 매우 멋진 순수 CSS3 사실적인 다층 클라우드 애니메이션 특수 효과입니다. 이 특수 효과는 여러 개의 투명한 구름 PNG 이미지를 배경 이미지로 사용하고 CSS 애니메이션을 사용하여 구름의 수평 부동 애니메이션 효과를 만듭니다.

소스 코드 보기 　HTML 구조

　The 다층 클라우드 애니메이션 효과의 HTML 구조는 매우 간단합니다. p.sky를 안테나의 배경 레이어로 사용하고 그 안에 여러 하위 하위 e388a4556c0f65e1904146cc1a846bee를 배치합니다.

<p class="sky">
    <p class="clouds_one"></p>
    <p class="clouds_two"></p>
    <p class="clouds_three"></p>
</p>

CSS 스타일

하늘 배경으로 .sky 요소는 고정 높이를 설정하고 상대 위치 지정을 사용하며 오버플로를 사용합니다. : 숨김; 범위 밖의 요소를 숨기려면 하늘색을 밝은 파란색 #007fd5로 설정하여 시작합니다. 그런 다음 sky_Background CSS3 애니메이션이 하늘 배경으로 설정됩니다. 이 애니메이션은 50초 내에 하늘 배경 색상을 연한 파란색에서 진한 파란색으로 전환합니다. animation animation-iteration-count가 무한 루프가 되는 횟수입니다.

이 특수 효과에서 각 요소는 GPU의 3D 효과를 켜고 디스플레이 성능을 향상시키는 데 사용되는 변환: Translate3d(0, 0, 0) 속성으로 설정됩니다.

.sky {
    height: 480px;
    background: #007fd5;
    position: relative;
    overflow: hidden;
    -webkit-animation: sky_background 50s ease-out infinite;
    -moz-animation: sky_background 50s ease-out infinite;
    -o-animation: sky_background 50s ease-out infinite;
    animation: sky_background 50s ease-out infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  @keyframes sky_background {
    0% {
      background: #007fd5;
      color: #007fd5
    }
    50% {
      background: #000;
      color: #a3d9ff
    }
    100% {
      background: #007fd5;
      color: #007fd5
    }
  }

구름 레이어 1은 첫 번째 구름 PNG 이미지를 배경 이미지로 사용하고 절대 위치 지정을 사용하며 하늘 컨테이너를 기준으로 왼쪽 정렬됩니다. 높이는 하늘과 같고 너비는 하늘 컨테이너의 3배입니다. cloud_one CSS3 애니메이션을 수행합니다. 구름이 수평으로 이동하도록 구름 레이어의 left 속성을 수정하는 애니메이션입니다.

.clouds_one {
    background: url("img/cloud_one.png");
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 300%;
    -webkit-animation: cloud_one 50s linear infinite;
    -moz-animation: cloud_one 50s linear infinite;
    -o-animation: cloud_one 50s linear infinite;
    animation: cloud_one 50s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  @keyframes cloud_one {
    0% {
      left: 0
    }
    100% {
      left: -200%
    }
  }

Cloud 2와 Cloud 3의 CSS3 애니메이션은 Cloud 1의 애니메이션 지속 시간이 50초이고 Cloud 1의 지속 시간이 다르다는 점을 제외하면 기본적으로 Cloud 1과 유사합니다. 클라우드 2는 75초, 클라우드 3의 지속 시간은 100초입니다. 이러한 방식으로 각 구름 레이어의 애니메이션 시간이 다르며 일부 배경 시각 효과를 얻을 수 있습니다.

위 내용은 Pure CSS3는 사실적인 다층 클라우드 애니메이션 특수 효과를 생성합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!