论坛 › 马黑黑教程专版 › 纯CSS可控关键帧动画演示

马黑黑 发表于 2024-5-23 12:42

纯CSS可控关键帧动画演示

<style>
#outer {
    position: relative;
    margin: 20px auto;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 10px groove tan;
    border-color: seagreen lightgreen forestgreen;
    --state: running;
}
#outer:hover { --state: paused; }
#outer::before, #outer::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: radial-gradient(silver, green, lightgreen, snow, red);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    animation: rot 8s linear infinite var(--state);
}
#outer::before { animation-delay: 0; }
#outer::after { animation-delay: -1s; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="outer"></div>

马黑黑 发表于 2024-5-23 12:42

代码
<style>
#outer {
    position: relative;
    margin: 20px auto;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 10px groove tan;
    border-color: seagreen lightgreen forestgreen;
    --state: running;
}
#outer:hover { --state: paused; }
#outer::before, #outer::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    background: radial-gradient(silver, green, lightgreen, snow, red);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    animation: rot 8s linear infinite var(--state);
}
#outer::before { animation-delay: 0; }
#outer::after { animation-delay: -1s; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="outer"></div>

马黑黑 发表于 2024-5-23 12:50

animation-duration 为 8秒，所以，两个形状一样的菱形其中一个提前1秒运行动画，就可得出一楼的整体运行动画的效果。

至于可控，这是CSS的简单交互功能：利用 hover 伪类实现，当元素有鼠标指针移入，重新给 --state 变量赋值。这里，--state 初始值 running，animation 动画运行，hover 伪类则令 --state 的值为 paused，暂停。hover 触发的是一个反向机制，大概意思是哪里来哪里去，换言之，指针设备移入，触发初始状态 A 变为 B，移出，恢复当下 B 状态、A 状态运行。

红影 发表于 2024-5-23 14:20

纯代码设计的图案，漂亮{:4_187:}

红影 发表于 2024-5-23 14:21

鼠标触碰就暂停。看到黑黑解说得很详细呢{:4_199:}

南无月 发表于 2024-5-23 17:51

矮油这小播咋长这么俊涅。。{:4_199:}

南无月 发表于 2024-5-23 17:54

其中一个提前1秒运行动画，就可得出一楼的整体运行动画，
第一次看到用时间按制位置的。。
这个思路简直是神操作。。

南无月 发表于 2024-5-23 17:59

看着是正方形，老师一直说菱形~~
把长宽改不一致之后，看着就是个菱形。{:4_199:}
小播径向渐变之后立体感也强，外圈立体，整体效果相当完美。。

马黑黑 发表于 2024-5-23 18:06

南无月 发表于 2024-5-23 17:59
看着是正方形，老师一直说菱形~~
把长宽改不一致之后，看着就是个菱形。
小播径向渐变之后立体 ...

正方形是菱形的一种特殊形态，你把正方形旋转45度看看

马黑黑 发表于 2024-5-23 18:07

南无月 发表于 2024-5-23 17:54
其中一个提前1秒运行动画，就可得出一楼的整体运行动画，
第一次看到用时间按制位置的。。
这个思路简直 ...

这有依据的，1/8

马黑黑 发表于 2024-5-23 18:07

南无月 发表于 2024-5-23 17:51
矮油这小播咋长这么俊涅。。
可以打60分不呢

马黑黑 发表于 2024-5-23 18:07

红影 发表于 2024-5-23 14:20
纯代码设计的图案，漂亮

感谢支持

马黑黑 发表于 2024-5-23 18:08

红影 发表于 2024-5-23 14:21
鼠标触碰就暂停。看到黑黑解说得很详细呢

{:4_190:}

红影 发表于 2024-5-23 18:51

马黑黑 发表于 2024-5-23 18:07
感谢支持

原来css里也可以的，一直以为只有js里才行呢。

红影 发表于 2024-5-23 18:55

马黑黑 发表于 2024-5-23 18:08


这个颜色配置很好呢{:4_187:}

马黑黑 发表于 2024-5-23 20:40

红影 发表于 2024-5-23 18:55
这个颜色配置很好呢

随意的，都可以的

马黑黑 发表于 2024-5-23 20:40

红影 发表于 2024-5-23 18:51
原来css里也可以的，一直以为只有js里才行呢。

各有各的实现方式

南无月 发表于 2024-5-23 22:00

马黑黑 发表于 2024-5-23 18:07
可以打60分不呢

98分。。还有两分上升空间{:4_170:}

南无月 发表于 2024-5-23 22:02

马黑黑 发表于 2024-5-23 18:07
这有依据的，1/8

这个思路本身就超级厉害

南无月 发表于 2024-5-23 22:02

马黑黑 发表于 2024-5-23 18:06
正方形是菱形的一种特殊形态，你把正方形旋转45度看看

这个知识点太熟了我必须同意啊。。{:4_170:}

查看完整版本: 纯CSS可控关键帧动画演示