Maison >interface Web >tutoriel CSS >CSS3 pur pour obtenir un effet d'enregistrement de papeterie/camarade de classe (exemple de code)
Idée d'implémentation :
Fond de grille, implémenté par dégradé linéaire de CSS3.
Les trous dans le papier sont composés de cercles et de cylindres. Plusieurs trous peuvent être réalisés en carrelant une boîte-ombre.
Code actuel :
<!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>Plus de codes d'effets spéciaux CSS3, html5 et javascript sympas, le tout dans : collection d'effets spéciaux js
Plus de tutoriels connexes s'il vous plaît visitez le Manuel de référence de la dernière version de CSS3
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!