CSS3 시각 효과 구현
- php中世界最好的语言원래의
- 2018-03-22 14:02:022634검색
이번에는 CSS3 시각 특수 효과 구현에 대해 알려드리겠습니다. CSS3 시각 특수 효과를 구현하기 위한 주의사항은 무엇인가요? 다음은 실제 사례입니다.
1. 단면 그림자
1. 상자 그림자 속성 적용, 형식: h-shadow v-shadow 흐림 확산 색상 삽입 속성 값 소개 h-sahdow: 가로 그림자의 위치, 음수 값 허용
①v-shadow : 수직 그림자의 위치, 음수 값 허용
②blur : 블러 거리
③spread : 그림자의 크기, 확장 거리, 음수 가능
④color : The 그림자 색상
⑤inset/outset: 내부 또는 외부 그림자
2. 그림자의 확장 거리는 4면 모두에 유효하며 한쪽에만 적용할 수 없습니다.
3. Box-shadow는 동시에 적용되는 여러 값 세트 설정을 지원합니다.
샘플 코드:
.wrap{
width: 200px;
height: 120px;
background: yellowgreen;
box-shadow: 2px 0px 4px -2px black,
-2px 0px 4px -2px black;
}
2. 테두리에 의해 생성된 모양- 투영에는 반경이 좋습니다. 그러나 유사 요소와 반투명 장식이 추가되면 그림자 성능이 매우 저하되며 다음과 같은 상황에서 문제가 발생합니다.
① 반투명 이미지,배경 이미지
또는 border-image② 요소는 점선, 점선 또는 반투명 테두리를 설정하지만 배경이 없습니다(또는 Background-clip
은 테두리 상자가 아닙니다)③The 요소 내부의 작은 모서리는 의사 요소를 사용하여 생성됩니다
4클립 경로를 통해 생성된 모양해결책: svg의 그림자를 사용하여 달성샘플 코드:.wrap{
width: 200px;
height: 120px;
border: 6px dotted yellowgreen;
--box-shadow: 0px 0px 4px 0px black;
-webkit-filter: drop-shadow(2px 0px 2px rgba(0,0,0,1))
}
3.염색체 효과
1. 필터 구현에 따라 필터 속성의 관련 값을 적용하여 이미지의 채도, 밝기 및 기타 값을 조정합니다.
2. 최소 블렌드 모드 기반 구현: 요소 콘텐츠, 배경 및 다음 요소의 발생을 달성합니다."3. 기본 배경 혼합 모드 구현, 기능: 배경색과 배경 이미지, 배경 이미지 및 이미지의 혼합을 달성합니다샘플 코드 세 가지 상황:.wrap1{
width: 200px;
height: 120px;
overflow: hidden;
}
.wrap1 > img{
max-height: 100%;
max-width: 100%;
-webkit-filter: sepia(1) saturate(4) hue-rotate(150deg);
}
.wrap2{
width: 200px;
height: 120px;
background: hsl(335, 100%, 50%);
overflow: hidden;
}
.wrap2 > img{
height: 100%;
width: 100%;
mix-blend-mode: luminosity;
}
.wrap3{
width: 200px;
height: 120px;
background-size: cover;
background-color: hsl(335, 100%, 50%);
background-image: url("../img/cat.png");
background-blend-mode: luminosity;
}
4. 젖빛 유리 효과
주요 구현 원칙: 콘텐츠 의사 요소의 배경은 기본 배경의 이미지와 동일하며 필터를 추가합니다:흐림 흐림 필터. 흐림 효과는 기본 배경에 적용할 수 없으며 요소의 배경에도 적용할 수 없으며(이로 인해 요소 자체가 흐려지고 텍스트가 보이지 않게 됩니다) 의사 요소에만 사용할 수 있습니다. .
코드는 다음과 같습니다.body{
background: url("../img/cat.png") no-repeat;
background-size: cover;
}
.wrap{
position: relative;
width: 500px;
margin: 0px auto;
padding: 10px;
line-height: 1.5;
background: hsla(0, 0%, 100%, .3);
overflow: hidden;
}
.wrap::before{
content: '';
background: url("../img/cat.png") 0/cover fixed;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
filter: blur(20px);
z-index: -1;
margin: -30px;
}
코드 설명: 1. 본문과 랩 의사 요소 모두 동일한 배경 이미지를 적용합니다
배경 첨부
는 고정으로 설정되어 있습니다. 배경 이미지는 스크롤과 함께 움직이지 않습니다.3. 랩 의사 요소를 절대 위치로 설정하고 Z-색인 수준은 배경보다 높습니다.
4. 흐림 효과를 사용합니다. 5. 너비를 늘리려면 음수 여백 값을 사용하고, 상위 요소에는 오버플로를 사용합니다. :hidden은 오버플로를 숨기고 흐린 배경을 더 사실적으로 만듭니다.5. 코너링 효과
구현 단계
1. 먼저 선형 그라데이션을 사용하여 코너링 효과를 얻습니다. 2. 그런 다음 선형 그라데이션을 사용하여 삼각형을 생성하고 위치, 너비 및 높이를 설정합니다코드는 다음과 같습니다..wrap{
background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .4) 0) no-repeat 100% 0/2em 2em,
linear-gradient(-135deg, transparent 1.4em, #58a 0);
width: 200px;
height: 120px;
}
Note
1.100% 0/2em 2em은 배경 요소의 위치, 너비 및 높이를 지정합니다. 특히 너비와 높이는 배경 요소의 일반적인 너비입니다. .
2. 두 번째 선형 그라데이션의 1.4em은 그라데이션 축에서 요소의 위쪽 가장자리까지의 거리인 그라데이션 축을 따라 측정됩니다. 오른쪽 모서리
3. 왼쪽 아래로 그라디언트가 왼쪽 아래 모서리에서 시작된다는 의미입니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. PHP 중국어 웹사이트!
추천 자료:
위 내용은 CSS3 시각 효과 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!