关心的动画 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">
      <路径d=“M12.3536 1.14645C12.1583 0.951184 11.8417 0.951184 11.6464 1.14645C11.4512 1.34171 11.4512 1.65829 11.6464 1.85355L12.7929 3H12C10.7037 3 9.71111 3.58423 8.87248 4.38931C8.20065 5.03427 7.59349 5.85684 6.99461 6.6682C6.86287 6.84668 6.73154 7.02462 6.6 7.2C5.10874 9.18835 3.49037 11 0.5 11C0.223858 11 0 11.2239 0 11.5C0 11.7761 0.223858 12 0.5 12C4.00963 12 5.89126 9.81165 7.4 7.8C7.54367 7.60845 7.6832 7.41962 7.81996 7.23454L7.82005 7.23443L7.82006 7.23441C8.41674 6.42695 8.96069 5.69085 9.56502 5.11069C10.2889 4.41577 11.0463 4 12 4H12.7929L11.6464 5.14645C11.4512 5.34171 11.4512 5.65829 11.6464 5.85355C11.8417 6.04882 12.1583 6.04882 12.3536 5.85355L14.3536 3.85355C14.5488 3.65829 14.5488 3.34171 14.3536 3.14645L12.3536 1.14645ZM0.5 3C3.35278 3 5.12992 4.44588 6.50548 6.06746L6.3762 6.24266C6.2483 6.4161 6.12293 6.58609 6 6.75C5.96397 6.79804 5.92798 6.84581 5.892 6.89331C4.57348 5.29306 3.02637 4 0.5 4C0.223858 4 0 3.77614 0 3.5C0 3.22386 0.223858 3 0.5 3ZM8.87248 10.6107C8.37284 10.131 7.90897 9.55314 7.45767 8.95468C7.64688 8.71693 7.82704 8.48061 8 8.25L8.08987 8.12987C8.58412 8.79402 9.05288 9.39766 9.56502 9.88931C10.2889 10.5842 11.0463 11 12 11H12.7929L11.6464 9.85355C11.4512 9.65829 11.4512 9.34171 11.6464 9.14645C11.8417 8.95118 12.1583 8.95118 12.3536 9.14645L14.3536 11.1464C14.5488 11.3417 14.5488 11.6583 14.3536 11.8536L12.3536 13.8536C12.1583 14.0488 11.8417 14.0488 11.6464 13.8536C11.4512 13.6583 11.4512 13.3417 11.6464 13.1464L12.7929 12H12C10.7037 12 9.71111 11.4158 8.87248 10.6107Z" fill="currentColor" fill-rule="evenodd" Clip-rule="evenodd"></path>
    </svg>
    <h2 class="text-label">随机播放节拍</h2>
  </盒子闪光>

  





<h2>谢谢你的卷轴</h2>
<br><br>
  <br><br>
<br><br>
<br><br>
`


          

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