纯css3实现信纸/同学录效果（代码示例）
Jun 15, 2020 am 09:52 AM
实现思路：
网格背景，由css3的线性渐变来实现。
纸上的打孔，由圆和圆柱组成，多个打孔，可以由box-shadow的平铺来实现。
实际代码：
<!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最新版参考手册
Atas ialah kandungan terperinci 纯css3实现信纸/同学录效果（代码示例）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Artikel Panas
Alat panas Tag
Artikel Panas
Tag artikel panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod)
Jun 28, 2022 pm 01:39 PM
Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? (contoh kod)
Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod)
Jul 19, 2022 am 11:28 AM
Gunakan CSS dengan mahir untuk merealisasikan pelbagai butang berbentuk pelik (dengan kod)
Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang
Jun 01, 2022 pm 07:15 PM
Bagaimana untuk menyembunyikan elemen dalam css tanpa mengambil ruang
Bagaimana untuk melaksanakan sempadan renda dalam css3
Sep 16, 2022 pm 07:11 PM
Bagaimana untuk melaksanakan sempadan renda dalam css3
Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen!
Jun 10, 2022 pm 01:00 PM
Ternyata karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen!
css3 apakah itu susun atur penyesuaian
Jun 02, 2022 pm 12:05 PM
css3 apakah itu susun atur penyesuaian
Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3
Apr 25, 2022 pm 04:52 PM
Bagaimana untuk membesarkan imej dengan mengklik tetikus dalam css3
Adakah kesan animasi css3 mempunyai ubah bentuk?
Apr 28, 2022 pm 02:20 PM
Adakah kesan animasi css3 mempunyai ubah bentuk?
