CSS3 pur pour obtenir un effet d'enregistrement de papeterie/camarade de classe (exemple de code)-tutoriel CSS-php.cn

CSS3 pur pour obtenir un effet d'enregistrement de papeterie/camarade de classe (exemple de code)

青灯夜游

Libérer： 2020-06-15 09:52:28

avant

3460 Les gens l'ont consulté

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: &#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>

Copier après la connexion

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!