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

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

青灯夜游Original: 2018-09-17 16:21:376196Durchsuche

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

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>

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

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>

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;

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

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Vertiefte Kenntnisse von rem in CSS und Layoutmethoden auf mobilen EndgerätenNächster Artikel：Vertiefte Kenntnisse von rem in CSS und Layoutmethoden auf mobilen Endgeräten

In Verbindung stehende Artikel

Mehr sehen