Was ist das Clip-Attribut in CSS? clip:rect() erstellt eine kreisförmige Fortschrittsbalkenanimation (Codebeispiel)-CSS-Tutorial-php.cn

Was ist das Clip-Attribut in CSS? clip:rect() erstellt eine kreisförmige Fortschrittsbalkenanimation (Codebeispiel)

青灯夜游

Freigeben： 2018-09-17 16:21:37

Original

6236 Leute haben es durchsucht

In diesem Kapitel erfahren Sie, was das Clip-Attribut in CSS ist. clip:rect() erstellt eine kreisförmige Fortschrittsbalkenanimation (Codebeispiel), stellt Ihnen vor, was das Clip-Attribut ist, die Verwendung von clip:rec() und verwendet schließlich ein Beispiel, damit Sie clip:rect() intuitiver verstehen . Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Was ist das Clip-Attribut in CSS? Die

Clip-Eigenschaft schneidet absolut positionierte Elemente ab. Mit dem Clip-Attribut können Sie die sichtbare Größe eines Elements definieren. Wenn ein Bild größer als das darin enthaltene Element ist, wird das Bild beschnitten und in der durch das Element definierten Form angezeigt.

1. Syntax

img {
position:absolute;
clip:rect(0px,60px,200px,0px);
}

Nach dem Login kopieren

Codebeispiel:

<!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="Was ist das Clip-Attribut in CSS? clip:rect() erstellt eine kreisförmige Fortschrittsbalkenanimation (Codebeispiel)" >
			<h4>裁剪后</h4>
			<img  class="img" src="css.jpg"    style="max-width:90%"  style="max-width:90%" / alt="Was ist das Clip-Attribut in CSS? clip:rect() erstellt eine kreisförmige Fortschrittsbalkenanimation (Codebeispiel)" >
		</div>
	</body>
</html>

Nach dem Login kopieren

Rendering:

Was ist das Clip-Attribut in CSS? clip:rect() erstellt eine kreisförmige Fortschrittsbalkenanimation (Codebeispiel)

0px , 165px, 200px und 34px in clip:rect(0px, 165px, 200px, 34px) entsprechen der oberen, rechten, unteren und linken Richtung des Bildes; clip:rect() muss mit dem Positionsattribut verwendet werden um das Bild anzupassen. Machen Sie einen Schnitt.

Hinweis:

Wenn ein Element zuerst mit „Überlauf: sichtbar“ definiert wird, funktioniert das Clip-Attribut nicht.
clip:rect() in CSS kann nur für absolut positionierte Elemente verwendet werden, einschließlich Elementen mit festen Attributen, da „fixed“ auch als absolute Positionierung gilt

2. Ausblenden der Benutzerfreundlichkeit

Gemäß der obigen Erklärung von oben rechts unten links wird das Element vollständig abgeschnitten, wenn links >= rechts oder unten <= oben außer Sicht, das heißt „verstecken“. Auf diese Weise ausgeblendete Elemente sind für Hilfsgeräte wie Bildschirmlesegeräte sichtbar und verbessern so die Benutzerfreundlichkeit der Seite.

2. Erstellen Sie eine kreisförmige Fortschrittsbalkenanimation mit CSS3 (CSS3-Animation wird in Kombination mit clip:rect() verwendet)

Lassen Sie uns eine Schauen Sie sich zuerst den Ladeeffekt an. Bild:

Was ist das Clip-Attribut in CSS? clip:rect() erstellt eine kreisförmige Fortschrittsbalkenanimation (Codebeispiel)

Codebeispiel:

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

Nach dem Login kopieren

Idee:

Zeichnen Sie zuerst einen quadratischen Rand

Was ist das Clip-Attribut in CSS? clip:rect() erstellt eine kreisförmige Fortschrittsbalkenanimation (Codebeispiel)

2. Machen Sie einen Kreis durch das Attribut „border-radius“ (unter Berücksichtigung der Kompatibilität)

-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
border-radius: 0.5em;

Nach dem Login kopieren

Was ist das Clip-Attribut in CSS? clip:rect() erstellt eine kreisförmige Fortschrittsbalkenanimation (Codebeispiel)

3. Legen Sie Animationseffekte fest. Durch Ändern der Beschneidungsposition (in Kombination mit der Positionierung) erscheint der Kreis langsam

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

Nach dem Login kopieren

Was ist das Clip-Attribut in CSS? clip:rect() erstellt eine kreisförmige Fortschrittsbalkenanimation (Codebeispiel)

Das obige ist der detaillierte Inhalt vonWas ist das Clip-Attribut in CSS? clip:rect() erstellt eine kreisförmige Fortschrittsbalkenanimation (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!