ケアされたアニメーションHTML CSS

`

ひじ

@property --angle {
構文: "";
初期値: 0deg;
継承: false;
}

@property --x {
構文: "";
初期値: 35%;
継承: false;
}

@property --shine {
構文: "";
初期値: 透明;
継承: false;
}

@property --shadow-strength {
構文: "";
初期値: 0%;
継承: false;
}

:root {
--h: 240;
--s: 97%;
--l: 50%;
--surface-1: hsl(var(--h) var(--s) calc(var(--l) 4%));
--surface-2: hsl(var(--h) var(--s) calc(var(--l) 8%));
--surface-3: hsl(var(--h) var(--s) calc(var(--l) 12%));
--text: hsl(var(--h) var(--s) 96%);
--text-alt: hsl(var(--h) var(--s) 85%);
--shadow-color: var(--h) var(--s) 15%;
--影の強さ: 1%;
--shadow: 0 -2px 5px 0 hsl(var(--shadow-color) /
calc(var(--shadow-strength) 2%)),
0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) 3%)),
0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) 3%)),
0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) 4%)),
0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) 5%)),
0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) 6%));
--スペース: 1rem;
}

• { ボックスのサイズ設定: ボーダーボックス; }

body {
カラー: var(--text);
背景: var(--surface-1);
パディングインライン: var(--space);
フォントサイズ: 1.125rem;
行の高さ: 1.4;
フォントファミリー: システム UI、サンセリフ;
フォントの太さ: 300;
}

メイン {
表示: グリッド;
ギャップ: 35vh;
}

.page-section {
コンテナタイプ: インラインサイズ;
表示: グリッド;
ギャップ: var(--space);
インラインサイズ: min(var(--max, 30rem), 100%);
margin-inline: auto;
}

.page-footer {
margin-block-start: 50vh;
text-align: center;
パディング: 2rem;

h2 {
表示: グリッド;
}

h2::before {
コンテンツ: "";
表示: ブロック;
幅: 1px;
高さ: 3レム;
margin-block-end: 0.5rem;
margin-inline: auto;
背景: var(--surface-3);
}
}

.icon {
幅: 2.5rem;
高さ: 自動;
}

.icon-sm {
幅: 1.5rem;
カラー: var(--text-alt);
}

.text-label {
font-size: 0.8em;
フォントの太さ: 500;
文字間隔: 0.01em;
}

.author {
text-align: end;
}

.cluster {
表示: flex;
align-items: center;
ギャップ: 1rem;
}

.page-headline {
---_マージン: 30vh;
マージンブロック開始: var(--_margin);
text-align: center;

&::after {
コンテンツ: "";
表示: ブロック;
幅: 1px;
高さ: var(--_margin);
margin-block-start: 0.8rem;
margin-inline: auto;
背景: var(--surface-3);
}
}

box-gleam {
---_gleam: 線形グラデーション(
115 度、
透明度 40%、
var(--surface-3),
透明度 70%
)
var(--x) 0 / 600% 100% パディングボックス;
--_gleam-cover: 放射状グラデーション(
中心の円、
var(--surface-1),
透明
)
パディングボックス;
--_cover: 線形グラデーション(var(--surface-1), var(--surface-1)) パディングボックス;
--_shine: 円錐勾配(
var(--angle) から、
var(--shine)、
透明 20% 80%、
var(--shine)
)
ボーダーボックス;
---_edges: 線形グラデーション(
155 度、
var(--surface-3),
var(--surface-2) 20% 80%、
var(--surface-3)
)
ボーダーボックス;

表示: グリッド;
ギャップ: var(--space);
位置: 相対;
パディング: 1.6rem;
境界半径: 0.8rem;
境界線: 1 ピクセルの実線透明;
box-shadow: var(--shadow);
背景: var(--gleam-cover)、var(--gleam)、var(--_cover)、var(--_shine)、
var(--_edges);
}

@supports (アニメーションタイムライン: view()) {
box-gleam {
アニメーション: リニア両方;
アニメーション名: 輝き、輝き、影;
アニメーション タイムライン: view();
アニメーション範囲: カバー -10% カバー 100%、エントリ 0% カバー 65%、
入口 0% 出口 150%;
}
}

@media (prefers-reduced-motion:reduce) {
box-gleam {
アニメーション: なし!重要;
}
}

@keyframes gleam {
{
から --角度: -1turn;
--x: 0%;
}
{
へ --角度: 1turn;
--x: 100%;
}
}

@keyframes シャドウ {
から、
{
へ box-shadow: なし;
}
50%、
65% {
box-shadow: var(--shadow);
}
}

@keyframes 輝き {
0%、
45% {
--shine: 透明;
}
80% {
--shine: hsl(var(--h) var(--s) calc(var(--l) 38%));
}
}

弁当グリッド {
表示: グリッド;
ギャップ: var(--space);

• { 表示: グリッド; アイテムを配置: 中央; 場所の内容: 中央; テキスト整列: 中央; パディング: 2.5rem; } }

@container (インラインサイズ > 35rem) {
弁当グリッド {
グリッド テンプレート列:repeat(var(--col-count, 3), 1fr);
グリッド テンプレート行:repeat(var(--row-count, 3), auto);

CSS ビュー - タイムラインの輝き効果 ⚠️ このブラウザは CSS アニメーション - タイムラインをサポートしていません

<box-gleam>
  <blockquote>
    <p>Fantasy is a necessary ingredient in living, it's a way of looking at life through the wrong end of a telescope.</p>
  </blockquote>
  <p class="author text-label">Dr. Seuss</p>
</box-gleam>

<box-gleam>
  <blockquote>
    <p>A day without sunshine is like, you know, night.</p>
  </blockquote>
  <p class="author text-label">Steve Martin</p>
</box-gleam>

<box-gleam>
  <blockquote>
    <p>I refuse to answer that question on the grounds that I don't know the answer</p>
  </blockquote>
  <p class="author text-label">Douglas Adams</p>
</box-gleam>

<box-gleam>
  <blockquote>
    <p>Whatever the problem, be part of the solution. Don’t just sit around raising questions and pointing out obstacles.</p>
  </blockquote>
  <p class="author text-label">Tina Fey</p>
</box-gleam>

<box-gleam>
  <blockquote>
    <p>Never memorize something that you can look up.</p>
  </blockquote>
  <p class="author text-label">Albert Einstein</p>
</box-gleam>

<box-gleam>
  <blockquote>
    <p>It’s no use going back to yesterday, because I was a different person then.</p>
  </blockquote>
  <p class="author text-label">Lewis Carroll</p>
</box-gleam>

新しい領域を示す

 
    <svg class="icon" aria-hidden="true" width="15" height="15" viewbox="0 0 15 15" fill="none" xmlns="http://www.w3.org /2000/svg">
      
    </svg>
    <h2 id="ビートをシャッフルします">ビートをシャッフルします</h2>
  

  





<h2 id="巻物をありがとう">巻物をありがとう</h2>
<br><br>
  <br><br>
<br><br>
<br><br>
`


          

以上がケアされたアニメーションHTML CSSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。