システム外のフォント参照とトランジション効果

コードをコピー

コードは次のとおりです。

<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size:14px;">1. 外部フォント参照: font-face を使用してフォントを紹介します</span></span>

場合によっては、システムにないフォントを使用する必要があります。外部からダウンロードしたフォントを参照する必要がある場合があります。方法は次のとおりです。

コードをコピー

コードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
<title>フォントリファレンス</title>
<メタ文字セット="utf-8">
<スタイルタイプ="text/css">
<span style="white-space:pre"> </span>/*フォントを導入するには@font-faceを使用します*/
@フォントフェイス{
フォントファミリー: へー;
/*次の 3 つの形式はすべて可能です*/
/*src:url("Sansation_Light.ttf");*/
/*src:url('简娃娃篆.ttf');*/
src:url(方正太子簡体.ttf);
}
.tb{
フォントサイズ: 80px;
色: #f40;
フォントの太さ: 300;
<span style="white-space:pre"> </span><span style="white-space:pre"> </span>/*ここで参照するフォントの名前を宣言します*/
フォントファミリー: へー;
}
</スタイル>
</head>
<本文>
<h1 class="tb">タオバオ</h1>
</本文>
</html>

2. トランジション効果: 属性はトランジションです

マウスが特定の領域に移動すると、効果が達成される前に遷移効果が発生します。のように

コードをコピー

コードは次のとおりです。

<!DOCTYPE html>
<html>
<ヘッド>
<title>トランジション</title>
<メタ文字セット="utf-8">
<スタイルタイプ="text/css">
.div_tran{
幅: 130ピクセル;
高さ: 100px;
/*RGBA の a は透明度 (範囲 0~1) です*/
背景: rgba(165,237,15,0.5);
/*背景: rgb(165,237,15);*/
/*css 透明度プロパティの不透明度 (範囲 0~1)*/
不透明度: .3;
色: #000;
<span style="white-space:pre"> </span>/*このコメントと次の文はどちらも許容されます*/
/*-webkit-transition:幅 2 秒、高さ 3 秒、背景、不透明度 2.5 秒; */
-webkit-transition:すべて 3s;
}
.div_tran:hover{
幅: 200ピクセル;
高さ: 200px;
背景: rgb(28,227,209);
不透明度: 1;
色: 赤;
}
/* スパン{
不透明度: 1;
位置: 相対的;
上: -100px;
}*/
</スタイル>
</head>
<本文>
<div class="div_tran">
移行
</div>

</本文>
</html>

<<: HTML の marquee 属性の詳細な説明

>>: JavaScript Proxyオブジェクトの詳細な説明