Maison > Article > interface Web > 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:376139parcourir

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 :

Quel est l’attribut 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 :

Quel est l’attribut 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.

Quel est l’attribut clip en CSS ? clip:rect() crée une animation de barre de progression circulaire (exemple de code)

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;

Quel est l’attribut clip en CSS ? clip:rect() crée une animation de barre de progression circulaire (exemple de code)

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);
}
}

Quel est l’attribut clip en CSS ? clip:rect() crée une animation de barre de progression circulaire (exemple de code)

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：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Compréhension approfondie de rem en CSS et des méthodes de mise en page sur les terminaux mobilesArticle suivant：Compréhension approfondie de rem en CSS et des méthodes de mise en page sur les terminaux mobiles

Articles Liés

Voir plus