CSSのクリップ属性とは何ですか? Clip:rect() は円形のプログレスバーアニメーションを作成します (コード例)-CSSチュートリアル-php.cn

原图：

裁剪后

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSのクリップ属性とは何ですか? Clip:rect() は円形のプログレスバーアニメーションを作成します (コード例)

青灯夜游

Sep 17, 2018 pm 04:21 PM

css

この章では、CSS のクリップ属性とは何なのかについて説明します。 Clip:rect() は、円形のプログレスバーアニメーション (コード例) を作成し、clip 属性とは何か、clip:rec() の使用法を紹介し、最後に例を使用して、clip:rect() をより直感的に理解できるようにします。。困っている友人は参考にしていただければ幸いです。

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 id="原图">原图：</h4>
			<img  src="/static/imghw/default1.png"  data-src="css.jpg"  class="lazy"      style="max-width:90%"  style="max-width:90%" / alt="CSSのクリップ属性とは何ですか? Clip:rect() は円形のプログレス バー アニメーションを作成します (コード例)" >
			<h4 id="裁剪后">裁剪后</h4>
			<img  class="img lazy"  src="/static/imghw/default1.png"  data-src="css.jpg"       style="max-width:90%"  style="max-width:90%" / alt="CSSのクリップ属性とは何ですか? Clip:rect() は円形のプログレス バー アニメーションを作成します (コード例)" >
		</div>
	</body>
</html>

ログイン後にコピー

レンダリング:

CSSのクリップ属性とは何ですか? Clip:rect() は円形のプログレスバーアニメーションを作成します (コード例)

0px Clip:rect(0px, 165px, 200px, 34px) の、165px、200px、および 34px は、それぞれ画像の上、右、下、左の方向に対応します。clip:rect() は、position 属性とともに使用する必要があります。画像を調整するカットをします。

注:

要素が最初に「overflow:visible」で定義されている場合、clip 属性は機能しません。
#CSS の clip:rect() は、固定属性を持つ要素を含む絶対位置の要素に対してのみ使用できます。これは、fixed も絶対位置とみなされますからです。

2. ユーザビリティの非表示

上記の右上下左の説明によると、左>=右または下<=上である場合、要素は完全に切り取られます。見えないところ、つまり「隠れる」。この方法で隠された要素は、スクリーンリーダーなどの支援デバイスに表示されるため、ページの使いやすさが向上します。

2. css3 を使用して円形のプログレスバーアニメーションを作成します (css3 アニメーションは、clip:rect() と組み合わせて使用されます)

では、最初にローディング効果を見てください。画像:

CSSのクリップ属性とは何ですか? 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>

ログイン後にコピー

アイデア:

1. まず正方形の境界線を描画します

CSSのクリップ属性とは何ですか? Clip:rect() は円形のプログレスバーアニメーションを作成します (コード例)

2. border-radius 属性を使用して円にします (互換性を考慮して)

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

ログイン後にコピー

CSSのクリップ属性とは何ですか? Clip:rect() は円形のプログレスバーアニメーションを作成します (コード例)

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のクリップ属性とは何ですか? Clip:rect() は円形のプログレスバーアニメーションを作成します (コード例)

以上がCSSのクリップ属性とは何ですか? Clip:rect() は円形のプログレスバーアニメーションを作成します (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7456

CakePHP チュートリアル

1376

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

ブートストラップボタンの使用方法 Apr 07, 2025 pm 03:09 PM

ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップの日付を表示する方法 Apr 07, 2025 pm 03:03 PM

回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。

ブートストラップの日付を確認する方法 Apr 07, 2025 pm 03:06 PM

ブートストラップの日付を確認するには、次の手順に従ってください。必要なスクリプトとスタイルを紹介します。日付セレクターコンポーネントを初期化します。 Data-BV-Date属性を設定して、検証を有効にします。検証ルール（日付形式、エラーメッセージなどなど）を構成します。ブートストラップ検証フレームワークを統合し、フォームが送信されたときに日付入力を自動的に検証します。

ブートストラップにファイルをアップロードする方法 Apr 07, 2025 pm 01:09 PM

ファイルアップロード機能は、Bootstrapを介して実装できます。手順は次のとおりです。BootstrapCSSおよびJavaScriptファイルを紹介します。ファイル入力フィールドを作成します。ファイルアップロードボタンを作成します。ファイルのアップロードを処理します（FormDataを使用してデータを収集し、サーバーに送信します）。カスタムスタイル（オプション）。

ブートストラップナビゲーションバーの設定方法 Apr 07, 2025 pm 01:51 PM

ブートストラップは、ナビゲーションバーをセットアップするための簡単なガイドを提供します。ブートストラップライブラリを導入してナビゲーションバーコンテナを作成するブランドアイデンティティの作成ナビゲーションリンクの作成他の要素の追加（オプション）調整スタイル（オプション）

See all articles

CSSのクリップ属性とは何ですか? Clip:rect() は円形のプログレスバーアニメーションを作成します (コード例)

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

CSSのクリップ属性とは何ですか? Clip:rect() は円形のプログレス バー アニメーションを作成します (コード例)

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

CSSのクリップ属性とは何ですか? Clip:rect() は円形のプログレスバーアニメーションを作成します (コード例)