찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >CSS의 클립 속성은 무엇입니까? 클립:직류()는 원형 진행률 표시줄 애니메이션을 생성합니다(코드 예)

CSS의 클립 속성은 무엇입니까? 클립:직류()는 원형 진행률 표시줄 애니메이션을 생성합니다(코드 예)

青灯夜游
青灯夜游원래의
2018-09-17 16:21:376263검색

이 장에서는 CSS의 클립 속성이 무엇인지 알려줄 것입니다. 클립:렉트()는 원형 진행률 표시줄 애니메이션(코드 예제)을 생성하고, 클립 속성이 무엇인지, 클립:렉()의 사용법을 소개하고, 마지막으로 예제를 사용하여 클립:렉트()를 보다 직관적으로 이해할 수 있도록 합니다. . 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. CSS의 클립 속성은 무엇인가요?

clip 속성은 절대 위치의 요소를 클립합니다. 클립 속성을 사용하면 요소의 표시 크기를 정의할 수 있습니다. 이미지가 포함된 요소보다 크면 이미지가 잘리고 요소에 의해 정의된 모양으로 표시됩니다.

1. 구문 

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

코드 예: 

<!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="CSS의 클립 속성은 무엇입니까? 클립:직류()는 원형 진행률 표시줄 애니메이션을 생성합니다(코드 예)" >
			<h4>裁剪后</h4>
			<img  class="img" src="css.jpg"    style="max-width:90%"  style="max-width:90%" / alt="CSS의 클립 속성은 무엇입니까? 클립:직류()는 원형 진행률 표시줄 애니메이션을 생성합니다(코드 예)" >
		</div>
	</body>
</html>

Rendering:

CSS의 클립 속성은 무엇입니까? 클립:직류()는 원형 진행률 표시줄 애니메이션을 생성합니다(코드 예)

clip:ret(0px,165px,200px,34px) 0px, 165px, 200px, 34px는 각각 상단에 해당합니다. picture , 오른쪽, 아래쪽 및 왼쪽 방향; 이미지를 자르려면 위치 속성과 함께 Clip:Rect()를 사용해야 합니다.

참고:

  • 요소가 "overflow: visible"로 먼저 정의되면 클립 속성이 작동하지 않습니다.

  • css의clip:ect()는 고정 속성이 있는 요소를 포함하여 절대 위치 요소에만 사용할 수 있습니다. 왜냐하면 고정 요소도 절대 위치 지정으로 간주되기 때문입니다

2. 위의 내용에 따르면 사용성 숨기기

상단 오른쪽 하단 왼쪽의 의미는 왼쪽 >= 오른쪽 또는 하단

2. css3을 사용하여 원형 진행률 표시줄 애니메이션 만들기(css3 애니메이션은 Clip:Rect()와 함께 사용됨)

로딩 렌더링 먼저 살펴보기:

CSS의 클립 속성은 무엇입니까? 클립:직류()는 원형 진행률 표시줄 애니메이션을 생성합니다(코드 예)

코드 예: 

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

Thinking :

1. 먼저 사각형 테두리를 그립니다

CSS의 클립 속성은 무엇입니까? 클립:직류()는 원형 진행률 표시줄 애니메이션을 생성합니다(코드 예)

2. border-radius 속성을 통해 원으로 만듭니다. (호환성 고려)

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

CSS의 클립 속성은 무엇입니까? 클립:직류()는 원형 진행률 표시줄 애니메이션을 생성합니다(코드 예)

3. 위치 지정) 이 원이 천천히 나타나도록 

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

CSS의 클립 속성은 무엇입니까? 클립:직류()는 원형 진행률 표시줄 애니메이션을 생성합니다(코드 예)

위 내용은 CSS의 클립 속성은 무엇입니까? 클립:직류()는 원형 진행률 표시줄 애니메이션을 생성합니다(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS의 rem과 모바일 단말의 레이아웃 방법에 대한 심층적인 이해다음 기사：CSS의 rem과 모바일 단말의 레이아웃 방법에 대한 심층적인 이해

관련 기사

더보기