コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS3 のケーススタディと学習_html/css_WEB-ITnose

CSS3 のケーススタディと学習_html/css_WEB-ITnose

WBOY
リリース： 2016-06-21 09:03:47
オリジナル
1211 人が閲覧しました

読み込み中エフェクト

エフェクトは次のとおりです。クリックしてプレビューします:

http://codepen.io/hawx1993/pen/YyYVpX

box- Shadow 属性

box-shadow: 投影方法、X 軸オフセット、Y 軸オフセット、シャドウブラー半径、シャドウ拡張半径、シャドウカラー

box-shadow は複数にすることができます。 -layered シャドウは、各シャドウ間をカンマで区切って同時に使用されます。最初に書かれた影は最上位レイヤーに表示されます 

box-shadow:    -10px 0 10px red, /*X轴为负，阴影在左边*/    10px 0 10px yellow, /*右边阴影*/    0 -10px 10px blue, /*Y轴为负，阴影在顶部*/    0 10px 10px green; /*底边阴影*/    //分割线  -webkit-box-shadow: 1px 4px 4px rgba(0,0,0,0.2),/* 外阴影*/  1px 2px 30px rgba(0,0,0,0.2) inset;/*内阴影*/
ログイン後にコピー

動的読み込みアニメーション効果

効果は次のとおりです。クリックしてプレビューします:

http:// codepen .io/hawx1993/pen/wKRPmN

winphone 読み込み

http://codepen.io/hawx1993/pen/yYRzZB

アニメーション属性

animation: name duration timing-function delay iteration-count direction fill-mode  play-state ;
ログイン後にコピー

パラメータは次のとおりです:

アニメーション名、アニメーション期間、アニメーション遷移タイプ、アニメーション遅延時間、アニメーション ループ番号、アニメーションがループ内で逆方向に移動するかどうか、アニメーション時間 外部状態、アニメーション状態

タイミング関数の値は次のとおりです。

linear: 線形遷移。ベジェ曲線 (0.0、0.0、1.0、1.0) と同等
イーズ: 滑らかな遷移。ベジェ曲線 (0.25、0.1、0.25、1.0) と同等
イーズイン: 低速から高速まで。ベジェ曲線 (0.42、0、1.0、1.0) と同等
イーズアウト: 高速から低速まで。ベジェ曲線 (0、0、0.58、1.0)
イーズインアウト: 低速から高速、そして低速へ。ベジェ曲線(0.42、0、0.58、1.0)相当

方向の値は以下の通りです。

normal: 法線方向
reverse: 走り込み逆方向
alternate: アニメーションは最初に通常通りに実行され、次に逆方向に実行され、交互に実行され続けます。
alternate-reverse: アニメーションは最初に逆方向に実行され、次に順方向に実行されます。交互に実行し続けます

fill-mode 値は次のとおりです:

none: デフォルト値。アニメーションの外側でオブジェクトの状態を設定しない
forwards: オブジェクトの状態をアニメーションの終了時の状態に設定します
backwards: オブジェクトの状態をアニメーションの開始時の状態に設定します
both: オブジェクトの状態をアニメーション状態の終了または開始に設定します

play-state: motion | stop 

animation-play-state = running | paused
ログイン後にコピー

border-radius 属性

border-radius: 「/」バックスラッシュ記号が存在する場合、「/」の前の値は要素の丸い角の水平半径を設定し、「/」の後の値は要素の垂直半径を設定します。

他の 4 つの値は、上に基づいて、左、右上、右下、左下の順に設定されます。

  • border-radius: 3 つの値を設定します。最初の値は左上に設定され、2 番目の値は右上と左下に設定され、3 番目の値は右下に設定されます

  • border-radius: 2 つの値を設定します。左上は右下と等しく、最初の値を受け取り、右上は左下と等しく、2 番目の値を受け取ります。

  • border-radius: 水平半径 / 垂直半径 (60px 40px 30px 20px) / (30px 20px 10px 5px): 各値はそれぞれ上、右、下、左の方向の値です。

border-radius: 左上隅の水平コーナー半径、右上コーナーの水平コーナー半径、右下コーナーの水平コーナー半径、水平コーナー半径左下隅の/左上隅の垂直円 コーナー半径、右上垂直コーナー半径、右下垂直コーナー半径、左下垂直コーナー半径 

border-radius:300px ===border-radius: 300px 300px 300px 300px/300px 300px 300px 300px;
ログイン後にコピー

フレックス ボックス モデル

レスポンシブデモ:

http://codepen.io/hawx1993/pen/KdrVrZ

スケーラビリティフレックス

flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
ログイン後にコピー


flex-grow：扩展比例：默认值1flex-shrink：收缩比例：默认值1flex-basis：伸缩基准值。`「flex子项」`长度的起始数值。如果缩写「flex: 1」, 则其计算值为「1 1 0%」如果缩写「flex: auto」, 则其计算值为「1 1 auto」如果「flex: none」, 则其计算值为「0 0 auto」
ログイン後にコピー

flex-flow はフレックス コンテナの主軸と側軸を定義します

flex-flow：<' flex-direction '> || <' flex-wrap '>
ログイン後にコピー

<': flex-direction を定義しますフレックスボックス要素の配置方向。 row、row-reverse、column、column-reverse
: フレックス コンテナーが単一行であるか複数行であるかを制御します。
デフォルト値: row nowrap

flex-wrap は、フレックス コンテナを単一行で表示するか複数行で表示するかを定義します。 

flex-wrap：nowrap | wrap | wrap-reverse
ログイン後にコピー

nowrap: フレックスコンテナは単一行です。この場合、フレックス アイテムがコンテナ
ラップからオーバーフローする可能性があります。フレックス コンテナは複数行です。この場合、フレックス項目のはみ出した部分は新しい行に配置され、項目内で改行が発生します。
wrap-reverse: 折り返しの配置を逆にします。

flex-direction は、フレックス レイアウトの主軸の方向を決定します

  • 行: フレックス項目は、表示される順序で表示されます。ドキュメントフロー

  • 行反転: 書き込みモードが ltr の場合、フレックス項目は右から左に配置されます

  • 列: 配置文書の流れに沿って上から下へ

  • 列: 柔軟な項目は下から上に配置されます

/* flex-flow: <'flex-direction'> */flex-flow: row;flex-flow: row-reverse;flex-flow: column;flex-flow: column-reverse;/* flex-flow: <'flex-wrap'> */flex-flow: nowrap;flex-flow: wrap;flex-flow: wrap-reverse;/* flex-flow: <'flex-direction'> and <'flex-wrap'> */flex-flow: row nowrap;flex-flow: column wrap;flex-flow: column-reverse wrap-reverse;/* Global values */flex-flow: inherit;flex-flow: initial;flex-flow: unset;
ログイン後にコピー

响应式布局Media Queries

类型 解释
@meida all and (min-width:800px) 所有最小水平屏幕宽度为800像素的屏幕应用规则
@meida and (min-width:800px) 简写方式，同上
@media (not min-width:800px) 当最小宽度不是800像素时会应用下列CSS规则


具有动感的下拉选择框

效果如下所示：

http://codepen.io/hawx1993/pen/rOoGpP

transform-origin

设置旋转元素的基点位置：

transform-origin: x-axis y-axis z-axis;
ログイン後にコピー

transform:rotate()

角度值为正，则顺时针旋转，反之则逆时针旋转

总结

指定x轴，y轴的值的属性有translate()、scale()：

  • translate(x,y)

  • translate3d(x,y,z)

  • translateX(x)

  • translateY(y)

  • scale(x,y)

  • scaleX(number)

  • scaleY(number)

translate3d(tx,ty,tz)：

  • tx：代表横向坐标位移向量的长度

  • tz: 代表z轴位移向量的长度。此值不能是一个百分比值，如果取百分比将会认为是无效

指定角度的属性有rotate()和skew()：

  • rotate(angle)

  • rotateX(angle)

  • rotateY(angle)

  • rotateZ(angle)

rotateX(a) 函数功能等同于rotate3d(1,0,0,a)
rotate3d(x,y,z,a)：x,y,z取0~1的数值，用来描述元素围绕X/Y/Z轴旋转的矢量值。

  • skewX(angle)

  • skewY(angle)

  • skew(x-angle,y-angle)

具有动感的复选框

http://codepen.io/hawx1993/pen/vNvWgW

before和after属性

:before是在元素的内容之前插入或创建一个虚拟的元素，:after是在元素的内容之后插入或创建一个虚拟的元素 （这相当于插入一个first-child和last-child属性）

css3图片缩放

效果如下所示，点击预览：

http://codepen.io/hawx1993/pen/zvyjEp

関連ラベル：
CSS3 案例研究与学习
ソース：php.cn
前の記事：マルチカラム・サイド・バイ・サイド・マルチブロック・サイド・バイ・サイドを実現するcss header_html/css_WEB-ITnose 次の記事：スター ⭐️ Rating_html/css_WEB-ITnose の純粋な CSS 実装
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2236
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2377
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1987
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1874
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1944
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート