Quel est l'attribut clip en CSS ? clip:rect() crée une animation de barre de progression circulaire (exemple de code)-tutoriel CSS-php.cn

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

青灯夜游

Libérer： 2018-09-17 16:21:37

original

6236 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

Rendu :

Quel 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 <= haut, l'élément sera complètement recadré. hors de vue, c'est-à-dire « se cacher ». Les éléments ainsi masqués sont visibles par les appareils d'assistance tels que les lecteurs d'écran, améliorant ainsi la convivialité de la page.

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 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>

Copier après la connexion

Idée :

1. Dessinez d'abord une bordure carrée.

Quel est lattribut 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;

Copier après la connexion

Quel est lattribut 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);
}
}

Copier après la connexion

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