關心的動畫 html css

`



hj

@property --angle {
語法：“”;
初始值：0deg；
繼承：假；
}

@property --x {
語法：“”;
初始值：35%；
繼承：假；
}

@property --shine {
語法：“”;
初始值：透明；
繼承：假；
}

@property --shadow-strength {
語法：“”;
初始值：0%；
繼承：假；
}

: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%);
--陰影顏色：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;
}

• { 框大小：邊框框； }

內文 {
顏色：var(--text);
背景：var(--surface-1);
內嵌填充：var(--space);
字體大小：1.125rem；
行高：1.4；
字體系列：系統使用者介面、無襯線字體；
字體粗細：300；
}

主要{
顯示：網格；
間隙：35vh；
}

.page-section {
容器類型：內聯大小；
顯示：網格；
間隙：var(--空格);
內嵌大小：min(var(--max, 30rem), 100%);
內聯邊距：自動；
}

.page-footer {
邊距區塊開始：50vh；
文字對齊：居中；
填充：2rem；

h2 {
顯示：網格；
}

h2::之前{
內容：「」；
顯示：區塊；
寬度：1px；
高度：3rem；
邊距區塊結束：0.5rem；
內聯邊距：自動；
背景：var(--surface-3);
}
}

.icon {
寬度：2.5rem；
高度：自動；
}

.icon-sm {
寬度：1.5rem；
顏色：var(--text-alt);
}

.text-label {
字體大小：0.8em；
字體粗細：500；
字母間距：0.01em；
}

.作者{
文字對齊：結束；
}

.cluster {
顯示：柔性；
對齊項目：居中；
間隙：1rem；
}

.page-headline {
--_margin: 30vh;
邊距塊開始：var(--_margin);
文字對齊：居中；

&::after {
內容：「」；
顯示：區塊；
寬度：1px；
高度：var(--_margin);
邊距區塊開始：0.8rem；
內聯邊距：自動；
背景：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)) padding-box;
--_shine: 圓錐梯度(
from var(--angle),
var(--shine),
透明20% 80%，
var(--shine)
)
邊框；
--_edges: 線性漸層(
155°，
var(--surface-3),
var(--surface-2) 20% 80%,
var(--surface-3)
)
邊框框；

顯示：網格；
間隙：var(--空格);
位置：相對；
填充：1.6rem；
邊界半徑：0.8rem；
邊框：1px實心透明；
盒子陰影：var(--shadow);
背景：var(--_gleam-cover)、var(--_gleam)、var(--_cover)、var(--_shine)、
var(--_edges);
}

@supports（動畫時間軸：view()）{
盒子閃光 {
動畫：線性兩者；
動畫名稱：閃光、閃耀、陰影；
動畫時間軸：view();
動畫範圍：覆蓋-10%覆蓋100%，入口0%覆蓋65%，
進入 0% 退出 150%;
}
}

@media（首選減少運動：減少）{
盒子閃光 {
動畫：無！重要；
}
}

@keyframes 閃光{
來自{
--角度：-1轉；
--x: 0%;
}
到{
--角度：1圈；
--x: 100%;
}
}

@keyframes 陰影 {
來自，
到{
盒子陰影：無；
}
50%，
65% {
盒子陰影：var(--shadow);
}
}

@keyframes 閃耀{
0%，
45% {
--shine：透明；
}
80% {
--shine: hsl(var(--h) var(--s) calc(var(--l) 38%));
}
}

便當網格 {
顯示：網格；
間隙：var(--space);

• { 顯示：網格； 地點項目：中心； 地點內容：中心； 文字對齊：居中； 填充：2.5rem； } }

區塊引用>

@container（內嵌大小> 35rem）{
便當網格 {
網格範本列：重複（var（--col-count，3），1fr）;
網格模板行：重複（var（--行計數，3），自動）；

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">
      
    <h2 id="隨機播放節拍">隨機播放節拍</h2>
  盒子閃光>

  





<h2 id="謝謝你的捲軸">謝謝你的捲軸</h2>
<br><br>
  <br><br>
<br><br>
<br><br>
`


          </svg>

以上是關心的動畫 html css的詳細內容。更多資訊請關注PHP中文網其他相關文章！