What is the clip attribute in css? clip:rect() creates circular progress bar animation (code example)-CSS Tutorial-php.cn

What is the clip attribute in css? clip:rect() creates circular progress bar animation (code example)

青灯夜游

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

Original

6207 people have browsed it

This chapter will tell you what is the clip attribute in CSS? clip:rect() creates a circular progress bar animation (code example), introduces to you what the clip attribute is, the usage of clip:rec(), and finally uses an example to let you understand clip:rect() more intuitively. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. What is the clip attribute in css?

clip property clips absolutely positioned elements. The clip attribute allows defining the visible size of an element. When an image is larger than the size of the element it contains, the image will be clipped and displayed as the shape defined by the element.

1. Grammar

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

Copy after login

Code example:

<!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="What is the clip attribute in css? clip:rect() creates circular progress bar animation (code example)" >
			<h4>裁剪后</h4>
			<img  class="img" src="css.jpg"    style="max-width:90%"  style="max-width:90%" / alt="What is the clip attribute in css? clip:rect() creates circular progress bar animation (code example)" >
		</div>
	</body>
</html>

Copy after login

Rendering:

What is the clip attribute in css? clip:rect() creates circular progress bar animation (code example)

0px, 165px, 200px, and 34px in clip:rect(0px, 165px, 200px, 34px) respectively correspond to the top, right, bottom, and left directions of the image; clip:rect() needs to be used with the position attribute to adjust the image Make a cut.

Note:

If an element is defined with "overflow: visible" first, the clip attribute will not work.
clip:rect() in css can only be used on absolutely positioned elements, including elements with fixed attributes, because fixed is also considered absolute positioning

2. Usability hiding

According to the above explanation of top right bottom left, if left >= right or bottom <= top, the element will be completely cropped Falling out of sight, that is, "hiding". Elements hidden in this way are visible to assistive devices such as screen readers, thus improving the usability of the page.

2. Create circular progress bar animation with css3 (css3 animation is used in combination with clip:rect())

Let’s take a look at the loading effect first Picture:

What is the clip attribute in css? clip:rect() creates circular progress bar animation (code example)

Code example:

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

Copy after login

Idea:

1. First draw a square border

What is the clip attribute in css? clip:rect() creates circular progress bar animation (code example)

2. Make it a circle through the border-radius attribute (considering compatibility)

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

Copy after login

What is the clip attribute in css? clip:rect() creates circular progress bar animation (code example)

3. Set animation effects, By changing the clipping position (combined with positioning), the circle slowly appears

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

Copy after login

What is the clip attribute in css? clip:rect() creates circular progress bar animation (code example)

The above is the detailed content of What is the clip attribute in css? clip:rect() creates circular progress bar animation (code example). For more information, please follow other related articles on the PHP Chinese website!