CSS3는 애니메이션 속성을 사용하여 배경색의 동적 그라데이션 효과를 얻습니다(코드 첨부).-CSS 튜토리얼-php.cn

CSS3는 애니메이션 속성을 사용하여 배경색의 동적 그라데이션 효과를 얻습니다(코드 첨부).

不言

풀어 주다： 2018-11-08 10:50:53

원래의

21494명이 탐색했습니다.

웹사이트의 배경색이 비교적 단일한 경우에는 충분히 아름답게 보이지 않습니다. 그렇다면 배경색을 변경 가능하게 만드는 방법은 무엇인가요? 이 기사에서는 CSS3 애니메이션을 사용하여 배경색을 점진적으로 변경하고, 색상과 순서의 조합을 조정하고, 색상 디자인을 더욱 눈길을 끄는 방법을 소개합니다.

더 이상 고민하지 말고 구체적인 콘텐츠를 살펴보겠습니다. (추천 과정: css3 동영상 튜토리얼)

먼저 CSS3 키프레임 애니메이션의 기본을 살펴보겠습니다.

먼저 점진적인 애니메이션을 이해해 봅시다. 요소 변경! CSS 3 애니메이션 속성에서 키프레임을 설정하고 자세한 모션을 그릴 수 있습니다. 애니메이션과 무한 루프의 시간과 타이밍은 CSS만 지정할 수 있습니다!

키프레임이란 무엇인가요?

키프레임(통과점)은 애니메이션의 변화를 정의하는 프레임입니다. @keyframes는 각 키프레임에 따라 요소가 어떻게 변경되는지 정의합니다. 애니메이션이 키프레임과 일치하려면 @keyframes 규칙의 이름을 요소에 지정된 animation-name 속성의 이름과 일치시켜야 합니다.

@keyframes 규칙의 이름은 " @keyframes + any name "으로 선언됩니다. 0%부터 100%까지 키프레임 정보를 작성하겠습니다. 0%는 애니메이션의 시작을 나타내고 100%는 종료 시간을 나타냅니다. 0% from, 100%는 to로 대체 가능합니다. 아래 예시는 배경색을 빨간색에서 주황색, 분홍색으로 변경하는 키 프레임입니다.

@keyframes name {
  0% { background: red; }
  50% { background: orange; }
  100% { background: pink; }
}

로그인 후 복사

참고: Chrome 및 Safari와 같은 WebKit 브라우저의 경우 공급업체 접두사(-webkit-)가 필요합니다. " -webkit-keyframes "라고 적고, @와 키프레임 사이에 -webkit- 을 씁니다.

animation 관련 속성

animation-name(애니메이션 이름)

@keyframes 사양에 정의된 이름입니다. 지정하지 않으면 애니메이션이 실행되지 않습니다. 또한 지정된 애니메이션 이름이 키프레임과 일치하지 않으면 키프레임이 실행되지 않습니다.

animation-duration(애니메이션 기간)

"초+초"를 통해 애니메이션을 실행하는 시간을 지정합니다. 예를 들어 "5초"는 5초 동안 지속됩니다. 0이면 실행되지 않습니다. 음수 값을 지정하더라도 0으로 처리됩니다.

animation-timing-function (애니메이션 타이밍 기능)

애니메이션의 시간과 계속 방법을 지정하세요. 애니메이션의 진행 속도를 조절하여 부드러운 움직임을 표현할 수 있습니다.

ease(초기값)

ease-in

ease-out

ease-in-out

linear

animation-delay(애니메이션 지연)

요소를 읽을 때 "요소부터 읽어옵니다. 숫자 + s"는 "애니메이션 시작" 시간을 지정합니다. 예를 들어 "5초"는 5초 동안 지속됩니다. 초기값 0은 즉시 실행됩니다.

animation-iteration-count (애니메이션 반복 횟수)

숫자를 사용하여 애니메이션을 반복할 횟수를 지정합니다. 무한 루프를 지정하려면 unlimited를 지정하십시오.

animation-direction(애니메이션 방향)

반복되는 애니메이션의 방향을 지정합니다.

normal...정방향으로 재생(초기값)

alternate...정상 및 짝수 시간에 반대 방향으로 홀수 시간 재생성(앞뒤로...)

reverse...뒤로 재생

alter-reverse... 역방향 재생

animation-play-state(애니메이션 재생 상태)

애니메이션이 일시 중지(일시 중지)되고 재생(실행 중)되도록 지정합니다. 다만, 많이 사용되지는 않는 것 같습니다.

animation-fill-mode (애니메이션 채우기 모드)

애니메이션 재생 전후의 상태를 지정합니다.

없음(기본값)

forwards..재생 후 마지막 키프레임 상태 유지

backwards...재생 전 첫 번째 키프레임 상태 적용

both…forwards…towards 앞으로 및 뒤로 모두 적용

속성 요약

애니메이션 속성을 사용하면 각 속성의 값을 공백으로 구분하여 개별적으로 지정할 수 있습니다. 해당 항목은 생략 가능하지만, 애니메이션 이름을 반드시 기재한 후 실행해야 합니다. 다음 순서대로 나열하는 것이 좋습니다.

animation-name(애니메이션 이름)

animation-duration(애니메이션 기간)

animation-timing-function(애니메이션 타이밍 기능)

animation-delay(애니메이션 지연)

animation-iteration-count(애니메이션 반복) Counting)

animation-direction(애니메이션 방향)

animation-fill-mode(애니메이션 채우기 모드)

animation-play-state(애니메이션 재생 상태)

body {
  animation: test 5s ease 1s infinite forwards;
}

로그인 후 복사

배경의 구체적인 내용을 살펴보겠습니다. 색상 변경

기본 지식을 이해한 후 구체적인 구현 방법을 자세히 살펴보겠습니다. 먼저 키프레임 이름을 "bg - color"로 설정하고 배경색을 0~100% 전환으로 설정합니다. 같은 색상을 0%와 100%로 설정하면 애니메이션을 반복하면서 부드럽게 움직입니다. 또한 Webkit 기반 브라우저에 대해 활성화하는 버전에 대해서도 설명합니다.

@-webkit-keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
@keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}

로그인 후 복사

이때 웹페이지 전체의 배경색이 지정되므로 본문에는 애니메이션 속성이 지정됩니다. 값은 "키프레임 이름", bg-color "change"는 10초에 추가, ",10s"는 무한 루프를 지정합니다. 웹킷 버전을 잊지 마세요. background-color를 사용하면 기본 배경색을 배경색으로 지정하여 애니메이션이 작동하지 않는 상황에 대비할 수 있습니다.

body {
  background-color: #e74c3c;
  animation: bg-color 10s infinite;
  -webkit-animation: bg-color 10s infinite;
}

로그인 후 복사

전체 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	body {
  background-color: #e74c3c;
  animation: bg-color 10s infinite;
  -webkit-animation: bg-color 10s infinite;
}
@-webkit-keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
@keyframes bg-color {
  0% { background-color: #e74c3c; }
  20% { background-color: #f1c40f; }
  40% { background-color: #1abc9c; }
  60% { background-color: #3498db; }
  80% { background-color: #9b59b6; }
  100% { background-color: #e74c3c; }
}
p {
  font-family: Meiryo, "Hiragino Kaku Gothic Pro W3",sans-serif;
  text-align: center;
  margin-top: 150px;
  color: #fff;
}
</style>
</head>
<body>
<p>php中文网</p>
</body>
</html>

로그인 후 복사

效果如下：

CSS3는 애니메이션 속성을 사용하여 배경색의 동적 그라데이션 효과를 얻습니다(코드 첨부).