你没想到过的var()和calc()函数居然可以实现如此CSS特效！

最新推荐文章于 2024-02-27 14:40:48 发布

沙漏在下雨

最新推荐文章于 2024-02-27 14:40:48 发布

阅读量643

点赞数 4

分类专栏： CSS特效文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_45906219/article/details/115210433

版权

本文介绍了如何利用CSS的var()和calc()函数创建一个独特的动画效果，涉及HTML结构、盒子居中、背景渐变、动画帧等知识点。通过20个盒子的旋转和定位，实现了圈状旋转动画，并在hover事件上添加停止动画的功能。详细步骤和代码示例可在GitHub中查看。

摘要由CSDN通过智能技术生成

在这里插入图片描述

这是一个很漂亮的CSS动画效果，这篇文章就教你轻松实现它!
如果想快速找到代码， github地址，喜欢就可以点个 start 哟。
从b站学习来的，自己加上其他东西，以及自己的想法。

预习知识点.

动画帧
背景渐变
var() 和 calc() 的使用
flex布局的场景

Start:

创建HTML结构:

<section>
    <div class="loading">
      <div class="text"></div>
      <div class="clock" style="--i:1;"></div>
      <div class="clock" style="--i:2;"></div>
      <div class="clock" style="--i:3;"></div>
      <div class="clock" style="--i:4;"></div>
      <div class="clock" style="--i:5;"></div>