css实现颜色渐变小动画

效果如下：

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css实现颜色渐变</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #eaeef0;}.loader{position: relative;display: flex;}.loader span{position: relative;width: 50px;height: 50px;background: #eaeef0;margin: 0 10px;border-radius: 50%;border: 6px solid #eaeef0;box-shadow: -8px -8px 15px rgba(255, 255, 255, 1),8px 8px 15px rgba(0, 0, 0, 0.2),inset 3px 3px 5px rgba(0, 0, 0, 0.1),inset -1px -1px 5px rgba(255, 255, 255, 1);}.loader span::before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #5c89ff;border-radius: 50%;box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.1),inset -1px -1px 5px rgba(255, 255, 255, 1);transform: scale(0);animation: animate 3.5s linear infinite, animateColor5s linear infinite;animation-delay: calc(var(--i) * 0.2s);}@keyframes animate{0%,9.99%,70.0001%{transform: scale(0);}10%,70%{transform: scale(1);}}@keyframes animateColor{0%{filter: hue-rotate(0deg);}100%{filter: hue-rotate(360deg);}}</style>
</head>
<body><div class="loader"><span style="--i:0;"></span><span style="--i:1;"></span><span style="--i:2;"></span><span style="--i:3;"></span><span style="--i:4;"></span><span style="--i:5;"></span><span style="--i:6;"></span></div>
</body>
</html>

其他小案例：

css实现加载旋转动画

css代码实现3D动画翻转 - 鱿鱼游戏卡片制作

css实现旋转的小流星动画

只用js代码实现电子时钟，精确到毫秒

简单的js代码实现主题色切换

点击主页看更多css小动画，js小案例…

我的主页

css实现颜色渐变小动画相关推荐

CSS实现内容颜色渐变的动画效果
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 CSS实现内容颜色渐变的动画效果主要用到css的动画一.HTML代码二.CSS代码主要用到css的动画这是css动画的文档, ...
【每日一练】68—CSS实现一组渐变按钮动画效果
在之前,我们也练习过一些按钮动画的效果,今天我们再来练习一组CSS实现的按钮动画效果,下面是今天练习的最终效果: 接下来,我们再来看一下这个案例的源码. HTML代码: <!doctype ht ...
css 语音,用css完成语音助手小动画
用css完成语音助手小动画 2020年08月10日 | 萬仟网IT编程 | 我要评论震惊!用css完成语音助手小动画不要太简单!语音助手动画定位布局添加动画语音助手动画hello大家好,我是Aaro ...
html如何给3种渐变色,css中颜色渐变的实现（三种方式）
本篇文章给大家带来的内容是关于css中颜色渐变的实现(三种方式),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. !!注意IE9及之前的版本不支持渐变.Safari要加-webkit- ...
php渐变背景颜色,css背景颜色渐变案例：线性渐变和径向渐变效果实例详解
渐变是两种或多种颜色之间的平滑过渡.以前,必须使用图像来实现这些效果.但是,通过使用 CSS3 渐变(gradients),可以减少下载的事件和宽带的使用.此外,渐变效果的元素在放大时看起来效果更好, ...
CSS文字颜色渐变 - 案例篇
(含效果图.代码)css3 文字颜色渐变 - 案例篇效果图: demo 代码如下: <doctype HTML!> <html> <head><title& ...
常用技巧性CSS：颜色渐变，截断英文单词，阴影文字.
在层里面加上一个iframe,优先级就比下拉列表框高了 <iframe style="position:absolute; visibility:inherit; top:0px; l ...
Android 颜色渐变属性动画
最近用到的一个效果,见下图文字颜色渐变 (周围的晃来晃去的框框是轨迹动画,下篇博客说) 1.原理计算机颜色由红.绿.蓝三色混合组成(值为0-255) 红.绿.蓝之间色值,按照不同大小比例组成不同颜 ...
css 文字颜色渐变 animation,css3文字渐变动画
这次给大家带来css3文字渐变动画,实现css3文字渐变动画的注意事项有哪些,下面就是实战案例,一起来看一下. 利用css3这个属性(背景剪裁): background-clip: border-bo ...

css实现颜色渐变小动画

css实现颜色渐变小动画相关推荐

最新文章

热门文章