コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 一般的な CSS スタイル (3)

一般的な CSS スタイル (3)

WBOY
リリース： 2016-08-15 16:49:51
オリジナル
1247 人が閲覧しました

1. 2D 変換

1. 変換オブジェクトの変換を設定または取得します

値:

none: 6 値 (a、b、c、d、e、f) の変換行列の形式で 2D 変換を指定します。これは、[a、b、c、d、e、f を直接適用するのと同等です。 ] 変換行列

translation([, ])。最初のパラメータは X 軸に対応し、2 番目のパラメータは Y 軸に対応します。 2 番目のパラメータが指定されていない場合、デフォルト値は 0 です。

TranslateX(): オブジェクトの X 軸 (水平方向) の平行移動を指定します

translateY(): オブジェクトのY軸(垂直方向)の平行移動を指定します

rotate(): オブジェクトの 2D 回転を指定します。最初のパラメータは X 軸に対応し、2 番目のパラメータは Y 軸に対応します。 2 番目のパラメーターが指定されていない場合は、最初のパラメーターの値がデフォルトで取得されます

scaleX(): オブジェクトの X 軸の (水平) スケーリングを指定します

scaleY(): オブジェクトの Y 軸の (垂直) スケーリングを指定します

skew( [, ]): オブジェクトのスキュー変換(斜めの歪み)を指定します。最初のパラメータは X 軸に対応し、2 番目のパラメータは Y 軸に対応します。 2 番目のパラメーターが指定されていない場合、デフォルト値は 0 です skewX(): オブジェクトの X 軸の (水平) 歪みを指定します

skewY(): オブジェクトの Y 軸の (垂直) 歪みを指定します

注: ブラウザーによっては、次の接頭辞が必要です。

カーネルの種類 書き方
ウェブキット(Chrome/Safari) -ウェブキット-変換
Gecko(Firefox) -moz-transform
プレスト(オペラ) お変身
トライデント(IE) -ms-transform
W3C 変身

例:

CSS コード:

リーリー

HTMLコード:

リーリー

2.transform-origin 特定の原点で変換するオブジェクトを設定または取得します。

値:

: 座標値をパーセントで指定します。マイナスになることもあります。

: 座標値を長さの値で指定します。マイナスになることもあります。

left: 原点の横座標を left に指定center①: 原点の横座標を

に指定

centerright: 原点の横座標を

として指定します

右上: 原点の座標を

として指定します

topcenter②: 原点の座標を

として指定します

centerbottom: 原点の垂直座標をbottomとして指定します

さまざまなブラウザでの書き方:

カーネルの種類 書き方
ウェブキット(Chrome/Safari) -webkit-transform-origin
Gecko(Firefox) -moz-transform-origin
プレスト(オペラ) -o-transform-origin
トライデント(IE) -ms-transform-origin
W3C 変換元

　　

 

 

 

 

　　例子：

　　CSS代码：

<span style="font-size: 15px;"><span style="color: #800000;">        #transform1
        </span>{<span style="color: #ff0000;">
            margin</span>:<span style="color: #0000ff;"> 0 auto</span>;<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> mediumvioletred</span>;<span style="color: #ff0000;">
            -webkit-transform</span>:<span style="color: #0000ff;"> rotate(15deg)</span>;/*旋转15度*/<span style="color: #ff0000;">
            -webkit-transform-origin</span>:<span style="color: #0000ff;"> left top</span>; /*以左上角为原点旋转*/
        } </span>
ログイン後にコピー

　　HTML代码：

<span style="font-size: 15px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="transform1"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>
ログイン後にコピー

　　

　　　二、过渡样式

　　　　1、transition-property  检索或设置对象中的参与过渡的属性。

　　　　取值：

　　　　all：所有可以进行过渡的css属性
   none：不指定过渡的css属性
　有过渡效果的属性：
　　
      　　例子：
　　　　CSS代码：　
<span style="font-size: 15px;"><span style="color: #800000;">         #transform1
        </span>{<span style="color: #ff0000;">
            margin</span>:<span style="color: #0000ff;"> 0 auto</span>;<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">
            transition-property</span>:<span style="color: #0000ff;"> background-color</span>;
            
        }<span style="color: #800000;">
        #transform1:hover
        </span>{<span style="color: #ff0000;">
            transition-duration</span>:<span style="color: #0000ff;">.5s</span>;<span style="color: #ff0000;">
            transition-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> yellow</span>;
        }
                </span>
ログイン後にコピー
　　　　HTML代码：
<span style="font-size: 15px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="transform1"</span><span style="color: #0000ff;">></span>请将鼠标放在上面<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>
ログイン後にコピー
请将鼠标放在上面
      2、transition-duration   检索或设置对象过渡的持续时间
　　　  transition-duration:time
　　　  例子可参见上个例子。
　   3、transition-timing-function  检索或设置对象中过渡的动画类型。
　　　取值：
　　　linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
          ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
          ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
          ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
          ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)cubic-bezier(, , , )：特定的贝塞尔曲线类型，4个数值需           在[0, 1]区间内。
　　　例子可参见上个例子。
 
 　 4、transition-delay   设置对象延迟过渡的时间。
 
　　　CSS代码：
<span style="font-size: 15px;"><span style="color: #800000;">        #delay1
        </span>{<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> antiquewhite</span>;<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;">100px</span>;                
        }<span style="color: #800000;">
        #delay1:hover
        </span>{<span style="color: #ff0000;">
            transition-delay</span>:<span style="color: #0000ff;">1s</span>;<span style="color: #ff0000;">
            transition-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> black</span>;
        }<span style="color: #800000;">
        #delay2
        </span>{<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> antiquewhite</span>;<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;">100px</span>;                
        }<span style="color: #800000;">
        #delay2:hover
        </span>{<span style="color: #ff0000;">
            transition-delay</span>:<span style="color: #0000ff;">4s</span>;<span style="color: #ff0000;">
            transition-timing-function</span>:<span style="color: #0000ff;">ease-in</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> blue</span>;
        }     </span>
ログイン後にコピー
　　　HTML代码;　 
<span style="font-size: 15px;"><span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="delay1"</span><span style="color: #0000ff;">><span style="color: #000000;">延迟</span></span>1s后开始过渡<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="delay2"</span><span style="color: #0000ff;">></span>延迟4s后开始过渡<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>
ログイン後にコピー
延迟1s后开始过渡
延迟4s后开始过渡
 
      ***一般情况下可以将变形与过渡结合使用制作出一些特别的效果。
        例：
　　CSS代码：
　　 
<span style="font-size: 15px;"><span style="color: #800000;">        #all
        </span>{<span style="color: #ff0000;">
            width</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            height</span>:<span style="color: #0000ff;"> 100px</span>;<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> red</span>;            
        }<span style="color: #800000;">
        #all:hover
        </span>{<span style="color: #ff0000;">
            background-color</span>:<span style="color: #0000ff;"> yellow</span>;<span style="color: #ff0000;">
            transition-delay</span>:<span style="color: #0000ff;"> .5s</span>;<span style="color: #ff0000;">
            transition-timing-function</span>:<span style="color: #0000ff;"> ease-in</span>;<span style="color: #ff0000;">
            transform</span>:<span style="color: #0000ff;"> scale(1.5,1.5)</span>;<span style="color: #ff0000;">
            transition-duration</span>:<span style="color: #0000ff;"> 1s</span>;
        }   </span>
ログイン後にコピー
　　HTML代码：
<span style="font-size: 15px;"><span style="color: #0000ff;">  <</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="all"</span><span style="color: #0000ff;">></span>请把鼠标放在上面查看效果<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span>
ログイン後にコピー
请把鼠标放在上面查看效果
関連ラベル：
CSS常用样式（三）
ソース：php.cn
前の記事：※抽選例 次の記事：【CSS面接の質問】3つのDIVを横に並べる必要があり、左右のDIVの幅は100pxに固定されており、中央のDIVが残りの幅を埋める（少なくとも2つの方法）
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
SCSSを使用してデフォルト値とCSS変数を生成する ウェブサイトのスタイリングを実装しています。レガシー サポートの理由から、少なくともしばらくの間は IE11 をサポートする必要があります。ワークフローと私の健全性の理由から、私は...
から 2024-04-06 17:46:54
0
1
355
CSS スタイルがサイトに適用されない Bootstrap5を使用してWebサイトを作成していますが、index.cssプロパティがindex.htmlに適用されません。サービス カードの上にマウスを移動すると、背景が変...
から 2024-04-06 17:12:23
0
1
336
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
HTML コードをカスタマイズしてコンテンツをすばやく変更する方法 常にデータを変更したい Web サイトを作成しました。これは、テキストの追加、ファイルの追加などを意味します。その方法を知りたいです。 cms を使用してこれを行うことはできますが...
から 2024-04-04 21:08:14
0
1
3462
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート