문구류/동급생 등록 효과를 달성하기 위한 순수 CSS3(코드 예)
- 青灯夜游앞으로
- 2020-06-15 09:52:283488검색
구현 아이디어:
그리드 배경, 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: '';
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 segmentfault.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제