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

Home

Web Front-end

CSS Tutorial

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

青灯夜游

Sep 17, 2018 pm 04:21 PM

css

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

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 id="原图">原图：</h4>
			<img  src="/static/imghwm/default1.png"  data-src="css.jpg"  class="lazy"      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 id="裁剪后">裁剪后</h4>
			<img  class="img lazy"  src="/static/imghwm/default1.png"  data-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>

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

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>

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;

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

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!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Iterating a React Design with Styled ComponentsApr 21, 2025 am 11:29 AM

In a perfect world, our projects would have unlimited resources and time. Our teams would begin coding with well thought out and highly refined UX designs.

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!Apr 21, 2025 am 11:26 AM

Oh, the Many Ways to Make Triangular Breadcrumb Ribbons

SVG Properties in CSS GuideApr 21, 2025 am 11:21 AM

SVG has its own set of elements, attributes and properties to the extent that inline SVG code can get long and complex. By leveraging CSS and some of the forthcoming features of the SVG 2 specification, we can reduce that code for cleaner markup.

A Few Functional Uses for Intersection Observer to Know When an Element is in ViewApr 21, 2025 am 11:19 AM

You might not know this, but JavaScript has stealthily accumulated quite a number of observers in recent times, and Intersection Observer is a part of that

Revisting prefers-reduced-motionApr 21, 2025 am 11:18 AM

We may not need to throw out all CSS animations. Remember, it’s prefers-reduced-motion, not prefers-no-motion.

How to Get a Progressive Web App into the Google Play StoreApr 21, 2025 am 11:10 AM

PWA (Progressive Web Apps) have been with us for some time now. Yet, each time I try explaining it to clients, the same question pops up: "Will my users be

The Simplest Ways to Handle HTML IncludesApr 21, 2025 am 11:09 AM

It's extremely surprising to me that HTML has never had any way to include other HTML files within it. Nor does there seem to be anything on the horizon that