기울어진 내비게이션 바와 반투명 유리 효과를 만드는 CSS3 튜토리얼

이 글에서는 주로 CSS3를 사용하여 기울어진 탐색 바와 반투명 유리 효과를 만드는 방법을 소개합니다. 도움이 필요한 친구들은 참고할 수 있습니다.

내비게이션 바는 모든 웹 프런트엔드 공성 사자에게 낯선 것은 아니지만 반투명 유리는 상대적으로 낯설 수 있습니다. 간단히 말해서 젖빛 유리는 실제로 해당 방법을 사용하여 그림이나 배경을 흐리게 할 수 있습니다. 이 효과는 사용자에게 시각적으로 매우 큰 영향을 미칩니다.

이 공유의 주제: CSS3를 사용하여 아래와 유사한 내비게이션 바와 반투명 유리 효과를 만듭니다.

내비게이션 바는 사다리꼴 모양입니다.

배경 영역의 얼어붙은 유리 효과.

사실 내비게이션 바와 불투명 유리 효과를 하나의 글로 공유한 이유가 있습니다. 왜냐하면 이 두 가지 효과의 실현은 중요한 아이디어와 분리될 수 없기 때문입니다.

말로 설명하자면: 상위 요소는 position:relative로 설정되고, 해당 의사 요소(이후 또는 이전)는 position:absolute로 설정되며, 위쪽, 아래쪽, 왼쪽, 오른쪽은 모두 0이고 의사 요소는 는 상위 요소의 전체 공간을 차지하고 마지막으로 z-index를 설정하여 상위 요소 뒤에 배경을 배치합니다.

구체적인 코드는 다음과 같습니다.

.container {
  position: relative;
}

.container::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
　z-index: -1;
}

무슨 뜻인가요? 걱정하지 마세요. 다음 두 가지 실제 예제에서 이 코드의 의미를 설명하겠습니다.

글 구조:

1. 탐색 바

　1.1: 평행사변형 탐색 바

　1.2: 사다리꼴 탐색 바

2. 결론

4. 참고기사

1. Navigation bar1.1: 평행사변형 네비게이션 바

평행사변형 제작 아이디어: 평행사변형 제작에서는 CSS3 2D 변형에서 기울이기() 속성을 사용합니다. 왜냐하면 수평 방향으로만 기울이기 때문입니다. 그래서 Skew()를 사용할 때 두 번째 매개변수를 0으로 지정해야 합니다. 그렇지 않으면 x, y축 방향이 기울어져 우리가 원하는 효과가 아닙니다. 또는 SkewX()를 사용하십시오. 구체적인 코드 구현은 다음과 같습니다.

평행사변형 탐색 모음 HTML

.keith li {
  position: relative;
}
.keith li::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
  background: #2175BC;
  -moz-transform: skewX(-25deg);
  -ms-transform: skewX(-25deg);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}
.keith li:hover::after {
  background: #2586D7;
}

위 코드에서는 중요한 부분만 표시되어 있습니다. 평행사변형을 설정할 때 다음 사항에 주의해야 합니다.

1. li 요소를 기준으로 설정한 다음 이후 의사 요소의 네 방향에서 절대 및 LRBT의 위치를 ​​설정합니다. 그 이유는 li 요소를 기준으로 의사 요소를 배치하고 의사 요소가 전체 li 요소의 공간을 채워 의사 요소에 대한 배경 세트가 전체 li 요소를 덮도록 해야 하기 때문입니다. 가장 중요한 것은 의사 요소에 SkewX()를 설정하면 의사 요소만 왜곡되고 상위 요소의 텍스트는 왜곡되지 않는다는 것입니다.

2.z-index:-1을 설정합니다. 여기서 z-index 값을 음수 값으로 설정하지 않으면 li 요소의 텍스트를 볼 수 없게 됩니다. 왜냐하면 절대값은 자체 요소의 수준을 높여서 pseudo 요소의 z-index를 증가시키기 때문입니다. -1이어야 하며 해당 레벨은 li 요소 뒤에 배치됩니다.

3. SkewX() 함수를 사용하여 의사 요소(li 요소 아님)를 25도 회전합니다. 브라우저 호환성 문제를 방지하려면 속성 접두사를 주의해서 작성하세요.

4. 의사 요소와 의사 클래스를 함께 사용하는 경우 먼저 의사 클래스에 주의한 다음 의사 요소에 주의해야 합니다. li::after:hover를 이렇게 설정하면 아무런 효과가 없습니다. 올바른 작성 방법은 li:hover::after입니다.

샘플 효과는 다음과 같습니다.

1.2: 래더 탐색 표시줄

사다리 탐색 표시줄의 구현 아이디어는 다음과 같습니다. 래더 탐색 표시줄은 CSS3 3D 변환에서 세 가지 속성인spective(),rotateX()및Transform-Origin을 사용합니다.

perspective()는 사용자와 요소의 3D 공간 Z 평면 사이의 거리를 설정하는 데 사용됩니다. 값이 작을수록 사용자가 3D 공간의 Z 평면에 가까워지고 시각적 효과가 뚜렷해집니다. ; 반대로 값이 클수록 사용자가 3D 공간의 Z 평면에 가까울수록 Z 평면에서 멀어질수록 시각적 효과가 작아집니다.

rarateX()는 3D 공간에서 x축 회전에 사용됩니다. 고등학교에서 배운 공간 직사각형 좌표계가 x축 회전과 동일하다고 상상할 수 있습니다.

transform-origin은 요소의 회전 중심점 위치를 지정하는 데 사용됩니다.

특정 속성의 사용법은 관련 문서를 확인하실 수 있으므로 여기서는 자세히 다루지 않겠습니다. 구체적인 코드 구현은 다음과 같습니다.

Ladder 네비게이션 바 HTML

JS code

.keith li {
  position: relative;
}
.keith li::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  background: #2175BC;
  -moz-transform: perspective(0.5em) rotateX(5deg);
  -ms-transform: perspective(0.5em) rotateX(5deg);
  -webkit-transform: perspective(0.5em) rotateX(5deg);
  transform: perspective(0.5em) rotateX(5deg);
  -moz-transform-origin: bottom;
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
}
.keith li:hover::after {
  background: #3B9BE5;
}

위 코드에서는 중요한 부분만 표시되어 있습니다. 다음 질문에 주목하세요:

1. 처음 4개의 질문은 기본적으로 평행사변형 네비게이션 바를 만드는 아이디어와 동일합니다. 그 중 의사 요소에spective(),rotateX()를 설정하면 의사 요소에 대한 3D 처리만 수행되고 공간에서 X축 회전이 수행되며 상위 요소의 텍스트에 대한 처리는 수행되지 않습니다. 텍스트는 기본 효과에 따라 계속 표시됩니다. Perspective() 및 RotateX()가 상위 요소에 설정되면 이후의 모든 하위 요소에 영향을 미칩니다. 즉, 모든 하위 요소(텍스트 포함)가 회전됩니다. 텍스트가 회전되어 읽기가 어렵습니다. 이 논리는 이해하기 어렵지 않을 것입니다.

2. 사다리꼴이 왼쪽 또는 오른쪽으로 기울어지는지 제어하는 ​​데 사용되는 속성은 변환 원점입니다. 사다리꼴이 기울어지지 않았습니다. 바닥. 왼쪽으로 기울이기: 왼쪽 아래로 기울이기: 오른쪽으로 기울이기.

샘플 효과는 다음과 같습니다.

2.毛玻璃效果

毛玻璃的实现思想：毛玻璃使用了CSS3中的backgroung-size，fiter滤镜的原理。

background-size属性用于指定背景图片的尺寸，其中的一个参数cover是将背景图片放大，以适合铺满整个容器。但是这个属性使用的前提是需要设定一张足够大尺寸的图片，否则会导致背景图片失真。

fiter滤镜中的blur()用于将图片进行高斯模糊处理，只接受单位值，值越大，模糊效果越明显。

在张鑫旭老师的一篇关于毛玻璃实现的文章中（会在参考文章中给出链接），给出了毛玻璃实现的效果，可是有一些小问题：如果在背景图片上加上文字，blur()会将文字一起模糊掉，这样的话会用户体验不太好。当然，在不需要文字的背景图片下，张鑫旭老师的方案还是很棒的。

以下给出具体代码：

毛玻璃HTML

body {
  background: url("../images/family-one.jpg") no-repeat center center fixed;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
}
.rascal {
  position: relative;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.rascal::after {
  z-index: -1;
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url("../images/family-one.jpg") no-repeat center center fixed;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-background-size: cover;
  background-size: cover;
  -webkit-filter: blur(20px);
  filter: blur(20px);
  margin: -30px;
}

上面代码中，需要注意几个问题：

1.同样这里也是使用父元素relative，伪元素absolute的方法，并且设置了TBLR和z-index。使用这种方法的关键之处在于我们是对伪元素进行了blur()处理，这样并不会影响到父元素中的文字效果。

2.需要给背景图片添加background-size属性，这个是为了让图片自适应整个屏幕的宽度。另外，这个属性需要添加两次。一是在body元素上，一是在伪元素上。在伪元素上添加的原因是我们要让blur()处理模糊的图片与背景图片相同。如果在伪元素中给background设置inherit的话，只会继承父容器rascal的背景，而rascal容器是一个白色背景的容器，这样就与我们的效果不相同了。下图是在伪元素中使用background:inherit;的毛玻璃效果。

这并不是我们想要的毛玻璃效果。所以伪元素上background的设置应该与背景图片是相同的。

3.在为伪元素设置正确的background之后，我们要使用margin负值模糊边缘消退的问题。

可以看到，毛玻璃中的blur()效果有点过犹不及了，一圈模糊效果超出了容器，给父元素设置overflow:hidden，可以将超出的部分剪切掉。最终的示例效果如下。

最终效果看起来就很自然了。

3.结束语

三个实例中，有一个共同的思想：将CSS3的倾斜，透视，旋转和滤镜效果都放在伪元素中，并且给父元素设置relative，伪元素设置absolute，让伪元素的宽度和高度撑满父元素的整个区域，最后设置伪元素的z-index为负值。这样做的好处就是不会影响父容器中的文字。

具体的代码如下：

.container {
  position: relative;
}
.container::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
　z-index: -1;
}

위 내용은 기울어진 내비게이션 바와 반투명 유리 효과를 만드는 CSS3 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!