CSS3 시각 효과 구현-CSS 튜토리얼-php.cn

CSS3 시각 효과 구현

php中世界最好的语言

풀어 주다： 2018-03-22 14:02:02

원래의

2614명이 탐색했습니다.

이번에는 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. 본문과 랩 의사 요소 모두 동일한 배경 이미지를 적용합니다

2. 랩의

배경 첨부

는 고정으로 설정되어 있습니다. 배경 이미지는 스크롤과 함께 움직이지 않습니다.

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