recherche

Maison >interface Web >tutoriel CSS >CSS3 pur pour obtenir un effet d'enregistrement de papeterie/camarade de classe (exemple de code)

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

青灯夜游
青灯夜游avant
2020-06-15 09:52:283480parcourir

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>

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!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Préprocesseur CSSArticle suivant：Préprocesseur CSS

Articles Liés

Voir plus