집 >웹 프론트엔드 >CSS 튜토리얼 >CSS에서 웹 페이지 배경의 동적 그라데이션 효과를 얻는 방법

CSS에서 웹 페이지 배경의 동적 그라데이션 효과를 얻는 방법

王林앞으로: 2020-04-16 09:14:083357검색

HTML 부분:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title> 渐变——天际线</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <div>
      渐变——天际线
    </div>
</body>
</html>

배경 색상 그라데이션을 얻기 위해 HTML(구조) 부분에서 어떤 작업도 수행할 필요가 없습니다. 표시 효과를 촉진하기 위해 여기에 텍스트 줄이 추가됩니다. tutorial

)

CSS 부분:

body{
  margin: 0;
  padding: 0;
  font-family: "montserrat";
  background-image: linear-gradient(125deg,#E4FFCD,#6DD5FA,#2980B9,#E4FFCD);  background-size: 400%;
  animation: bganimation 15s infinite;
}

.text{
  color: white;
  text-align: center;
  text-transform: uppercase;
  margin: 400px 0;
  font-size: 22px;
}

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

효과는 그림과 같습니다:

CSS에서 웹 페이지 배경의 동적 그라데이션 효과를 얻는 방법 포인트:

 background-image: linear-gradient（）；

linear-gradient() 함수는 선형 그라데이션 "이미지"를 만드는 데 사용됩니다. 선형 그래디언트를 만들려면 그래디언트 효과의 시작점과 방향(각도로 지정)을 설정해야 합니다. 끝 색상도 정의해야 합니다. 중지 색상은 Gecko가 만들기를 원하는 부드러운 전환이며, 더 복잡한 그라데이션 효과를 만들기 위해 더 많은 색상을 지정할 수 있지만 적어도 두 개를 지정해야 합니다.

"125deg"는 그라디언트의 기울기 각도를 설정하는 것이며

background-position：

속성은 배경 이미지의 시작 위치를 설정합니다.

이 배경화면 그라데이션을 사용해 볼 수도 있습니다:

background:white;
background-image: linear-gradient(90deg,
                  rgba(200,0,0,.5) 50%, transparent 0),
                  linear-gradient( 
                  rgba(200,0,0,.5) 50%, transparent 0);
background-size: 30px 30px;

CSS에서 웹 페이지 배경의 동적 그라데이션 효과를 얻는 방법

관련 기사