关心的动画 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">
      
    </svg>
    <h2 id="随机播放节拍">随机播放节拍</h2>
  盒子闪光>

  





<h2 id="谢谢你的卷轴">谢谢你的卷轴</h2>
<br><br>
  <br><br>
<br><br>
<br><br>
`


          

以上是关心的动画 html css的详细内容。更多信息请关注PHP中文网其他相关文章！