纯CSS可控关键帧动画演示

马黑黑

马黑黑

代码

1. <style>
   
2. #outer {
   
3.     position: relative;
   
4.     margin: 20px auto;
   
5.     width: 150px;
   
6.     height: 150px;
   
7.     border-radius: 50%;
   
8.     border: 10px groove tan;
   
9.     border-color: seagreen lightgreen forestgreen;
   
10.     --state: running;
    
11. }
    
12. #outer:hover { --state: paused; }
    
13. #outer::before, #outer::after {
    
14.     position: absolute;
    
15.     content: '';
    
16.     width: 100%;
    
17.     height: 100%;
    
18.     background: radial-gradient(silver, green, lightgreen, snow, red);
    
19.     clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    
20.     animation: rot 8s linear infinite var(--state);
    
21. }
    
22. #outer::before { animation-delay: 0; }
    
23. #outer::after { animation-delay: -1s; }
    
24. @keyframes rot { to { transform: rotate(360deg); } }
    
25. </style>
    
26. 
    
27. <div id="outer"></div>

复制代码

马黑黑

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

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

红影

纯代码设计的图案，漂亮

红影

鼠标触碰就暂停。看到黑黑解说得很详细呢

南无月

矮油这小播咋长这么俊涅。。

南无月

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

南无月

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

马黑黑

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

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

马黑黑

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

这有依据的，1/8

马黑黑

南无月 发表于 2024-5-23 17:51
矮油这小播咋长这么俊涅。。

可以打60分不呢

马黑黑

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

感谢支持

马黑黑

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

红影

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

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

红影

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

这个颜色配置很好呢

马黑黑

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

随意的，都可以的

马黑黑

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

各有各的实现方式

南无月

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

98分。。还有两分上升空间

南无月

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

这个思路本身就超级厉害

南无月

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

这个知识点太熟了我必须同意啊。。