Maison >interface Web >tutoriel CSS >Quel est l'attribut clip en CSS ? clip:rect() crée une animation de barre de progression circulaire (exemple de code)
Quel est l'attribut clip en CSS ? clip:rect() crée une animation de barre de progression circulaire (exemple de code)
- 青灯夜游original
- 2018-09-17 16:21:376219parcourir
Ce chapitre vous dira quel est l'attribut clip en CSS ? clip:rect() crée une animation de barre de progression circulaire (exemple de code), présente ce qu'est l'attribut clip, l'utilisation de clip:rec() et utilise enfin un exemple pour permettre à tout le monde de comprendre clip:rect() de manière plus intuitive. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
1. Quel est l'attribut clip en CSS ? La propriété
clip coupe les éléments en position absolue. L'attribut clip permet de définir la taille visible d'un élément. Lorsqu'une image est plus grande que l'élément qu'elle contient, l'image sera découpée et affichée sous la forme définie par l'élément.
1. Syntaxe
img {
position:absolute;
clip:rect(0px,60px,200px,0px);
}Exemple de code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 200px;
height: 500px;
margin: 50px auto;
}
img{
border: 1px solid #000;
}
.img {
position:absolute;
clip:rect(0px,165px,200px,34px);
}
</style>
</head>
<body>
<div class="demo">
<h4>原图：</h4>
<img src="css.jpg" style="max-width:90%" style="max-width:90%" / alt="Quel est l'attribut clip en CSS ? clip:rect() crée une animation de barre de progression circulaire (exemple de code)" >
<h4>裁剪后</h4>
<img class="img" src="css.jpg" style="max-width:90%" style="max-width:90%" / alt="Quel est l'attribut clip en CSS ? clip:rect() crée une animation de barre de progression circulaire (exemple de code)" >
</div>
</body>
</html>Rendu :
%20cr%C3%A9e%20une%20animation%20de%20barre%20de%20progression%20circulaire%20(exemple%20de%20code) "153717069077334Quel est lattribut clip en CSS ? clip:rect() crée une animation de barre de progression circulaire (exemple de code)")
0px, 165px, 200px, 34px dans clip:rect(0px, 165px, 200px, 34px) correspondent respectivement aux directions haut, droite, bas et gauche de l'image ; clip:rect() doit être utilisé avec le attribut position , pour recadrer l'image.
Remarque :
Si un élément est défini avec "overflow: visible" en premier, l'attribut clip ne fonctionnera pas.
clip:rect() en CSS ne peut être utilisé que sur des éléments à position absolue, y compris les éléments avec des attributs fixes, car fixe est également considéré comme un positionnement absolu
2. Masquage de l'utilisabilité
Selon l'explication ci-dessus du haut à droite en bas à gauche, si gauche >= droite ou bas
2. Créez une animation de barre de progression circulaire avec CSS3 (l'animation CSS3 est utilisée en combinaison avec clip:rect())
Prenons un regardez d'abord l'effet de chargement Image :
%20cr%C3%A9e%20une%20animation%20de%20barre%20de%20progression%20circulaire%20(exemple%20de%20code) "153717108973947Quel est lattribut clip en CSS ? clip:rect() crée une animation de barre de progression circulaire (exemple de code)")
Exemple de code :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>css3制作圆形进度条动画</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
overflow-y: scroll;
font-family: MuseoSans, Georgia, "Times New Roman", Times, serif;
font-size: 13px;
color: #444;
border-top: 3px solid #444;
background-color: #E4E6E5;
overflow-x: hidden;
}
section .demo {
width: 530px;
margin: 15em auto;
overflow: hidden;
}
ul.notes {
clear: both;
}
ul.notes li {
float: left;
margin-right: 3em;
display: inline;
}
ul.notes li:last-child {
margin: 0;
}
ul.notes li span.skill {
display: block;
text-align: center;
padding: 10px 0;
text-shadow: 1px 0 0 #FFFFFF;
}
.notesite {
display: inline-block;
position: relative;
width: 1em;
height: 1em;
font-size: 5.4em;
cursor: default;
}
.notesite>.percent {
position: absolute;
top: 20px;
left: 0;
width: 100%;
font-size: 25px;
text-align: center;
z-index: 2;
}
.notesite>.percent .dec {
font-size: 15px;
}
.notesite>#slice {
position: absolute;
width: 1em;
height: 1em;
clip: rect(0px, 1em, 1em, 0.5em);
}
.notesite>#slice.gt50 {
clip: rect(auto, auto, auto, auto);
}
.notesite>#slice>.pie {
position: absolute;
border: 0.1em solid #444;
width: 0.8em;
height: 0.8em;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;
-webkit-animation: craw 2s linear;
-webkit-animation-iteration-count: 1;
}
@-webkit-keyframes craw {
0% {
clip: rect(0em, 1em, 0em, 0.5em);
}
50% {
clip: rect(0em, 1em, 1em, 0.5em);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
clip: rect(0em, 1em, 1em, 0em);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
}
li.html .notesite>#slice>.pie {
border-color: #DF6C4F;
}
.notesite.fill>.percent {
display: none;
}
li.html .notesite:before {
background: #DF6C4F;
}
</style>
</head>
<body class="home">
<div class="wrapper">
<section>
<div class="demo">
<ul class="notes">
<li class="html">
<div class="notesite" id="note_0" dir="100">
<div class="percent"></div>
<div id="slice" class="gt50">
<div class="pie fill">
</div>
</div>
</div><span class="skill">HTML</span>
</li>
</ul>
</div>
</section>
</div>
</body>
</html>Idée :
1. Dessinez d'abord une bordure carrée.
2. Faites-en un cercle passant par l'attribut border-radius (en tenant compte de la compatibilité)
-moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em;
3. Définissez l'effet d'animation et faites apparaître le cercle lentement en changeant la position de découpage (combinée au positionnement)
@-webkit-keyframes craw {
0% {
clip: rect(0em, 1em, 0em, 0.5em);
}
50% {
clip: rect(0em, 1em, 1em, 0.5em);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
clip: rect(0em, 1em, 1em, 0em);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
}
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!