문구류/동급생 등록 효과를 달성하기 위한 순수 CSS3(코드 예)-CSS 튜토리얼-php.cn

문구류/동급생 등록 효과를 달성하기 위한 순수 CSS3(코드 예)

青灯夜游

풀어 주다： 2020-06-15 09:52:28

앞으로

3396명이 탐색했습니다.

문구류/동급생 등록 효과를 달성하기 위한 순수 CSS3(코드 예)

구현 아이디어:

그리드 배경, CSS3의 선형 그라데이션으로 구현.

종이에 있는 펀치 구멍은 원과 원통으로 구성되어 있으며 상자 그림자를 타일링하여 여러 개의 구멍을 구현할 수 있습니다.

실제 코드:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
<style>
.bg-grid {
    height: 400px;
    padding: 10px;
    padding-top: 64px;
    background-color: #efefef;
    background-image:   linear-gradient(#e7e6e6 1px, transparent 0),
                        linear-gradient(90deg, #e7e6e6 1px, transparent 0);
    background-size: 21px 21px, 21px 21px;
    background-position: center;
}

.bg-grid:before,
.bg-grid:after{
    content: &#39;&#39;;
    position: absolute;
    z-index: 0;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    background-color: #fff;
    height: 28px;
    box-shadow: 68px 0 0 0 #fff, 
                calc(68px * 2) 0 0 0 #fff, 
                calc(68px * 3) 0 0 0 #fff, 
                calc(68px * 4) 0 0 0 #fff, 
                calc(68px * 5) 0 0 0 #fff, 
                -68px 0 0 0 #fff, 
                calc(68px * -2) 0 0 0 #fff, 
                calc(68px * -3) 0 0 0 #fff, 
                calc(68px * -4) 0 0 0 #fff, 
                calc(68px * -5) 0 0 0 #fff;
}
.bg-grid:before {
    top: 0;
    width: 10px;
}

.bg-grid:after {
    top: 26px;
    width: 28px;
    border-radius: 50%;
}
.bg-grid{

}
</style>
</head>
<body>
<div></div>

</body>
</html>

로그인 후 복사

더 멋진 CSS3, html5, javascript 특수 효과 코드, 모두 포함: js 특수 효과 컬렉션

더 많은 관련 튜토리얼을 보려면 CSS3 최신 버전 참조 매뉴얼

을 방문하세요.

위 내용은 문구류/동급생 등록 효과를 달성하기 위한 순수 CSS3(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!