CSS_style

关于一些好玩的css特效学习和分享.

关于Loading的注意事项：

CSDN博客地址:

• 给标签加上style: -- 前缀 我们就可以是用 var(--) 或者 冒号对应的后面的值 然后通过cacl来计算对应的数值 比如 style="--i:1" var(--i) = 1
• box-shadow 可以设置多个阴影区域
• transform 如果需要覆盖 可能会出现问题 所以需要把之前的样式 重新进行覆盖的写, 否者会出现一些其他的问题, 依然是先位移 然后进行其他的转换 2D 3D
• 动画的延迟时间也是可以通过calc来进行插值计算 值的获取通过var来获取标签里面的stle设置 初始
• animation-play-state 可以改变动画的状态
• calc() 的计算确实很不错.

关于热点图的注意事项：

CSDN博客地址:

• 我们预先给盒子加上了阴影， 然后设置动画，不断的更改盒子的大小， 那么就可以达到阴影变大， 也就是越来越大的波纹特效， 当然，可以设置多个阴影， 应该会更赞。
• 在C3的动画中， 默认运动曲线是 ease 先加速， 我们也可以设置位 匀速 linear, 然后无限循环 infinite 即可。
• 热点图的制作离不开动画的延迟
• 在选择相同的标签的时候， 属性选择器可能是一个更好的选择.

关于熊的注意事项：

CSDN博客地址:

• 动画不仅仅可以设置为动画时间， 还可以设置 步长动画 step(num) 来实现.
• 如果动画有多个， 可以使用逗号 分离每个动画。

关于时钟的注意事项:

CSDN博客地址

• 制作的思路和制作loading是一样的， 只不过在它的基础上多加了二套动画， 分别设置各自动画的延迟时间
• 关于转换的叠加， 在动画上， 如果又有转换， 默认会将之前的覆盖掉， 这不好， 我们需要将之前的覆盖上写，就可以了