本章帶給大家css中clip屬性是什麼？ clip:rect（）製作圓形進度條動畫（程式碼實例），跟大家介紹了什麼是clip屬性，clip:rec(）的用法，最後透過一個實例讓大家更直觀的了解clip:rect()。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
一、css什麼是clip屬性？
clip 屬性剪裁絕對定位元素。 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中clip屬性是什麼？ clip:rect（）製作圓形進度條動畫（程式碼實例）" >
<h4>裁剪后</h4>
<img class="img" src="css.jpg" style="max-width:90%" style="max-width:90%" / alt="css中clip屬性是什麼？ clip:rect（）製作圓形進度條動畫（程式碼實例）" >
</div>
</body>
</html>效果圖：
#2.可用性隱藏
根據上面對top right bottom left的釋義，如果left >= right或bottom <= top，則元素會被完全裁掉而不可見，即「隱藏」。透過這種方式隱藏的元素是可以被螢幕閱讀器等輔助設備識別的，從而提高了頁面的可用性。二、css3製作圓形進度條動畫（css3 動畫與clip:rect()結合使用）
先看看載入效果圖：
<!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>
-moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em;
@-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中clip屬性是什麼？ clip:rect（）製作圓形進度條動畫（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
