Heim >Web-Frontend >CSS-Tutorial >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:376261Durchsuche
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:
%20erstellt%20eine%20kreisf%C3%B6rmige%20Fortschrittsbalkenanimation%20(Codebeispiel) "153717069077334Was 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:
%20erstellt%20eine%20kreisf%C3%B6rmige%20Fortschrittsbalkenanimation%20(Codebeispiel) "153717108973947Was 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
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;
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);
}
}
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!