CSS 3.0实现时光轴加载动画

给大家分享一个用CSS 3.0实现时光轴加载动画，效果如下：

以下是代码实现，欢迎大家复制、粘贴和收藏。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>CSS 3.0实现时光轴加载动画</title><style>html {height: 100%;background: linear-gradient(#813b97, #463c96);}@-webkit-keyframes progress1 {0% {transform: scalex(0);opacity: 0.5;}90% {transform: scalex(1);opacity: 1;}92% {transform: scalex(1);opacity: 1;}100% {transform: scalex(1);opacity: 0;}}@keyframes progress1 {0% {transform: scalex(0);opacity: 0.5;}90% {transform: scalex(1);opacity: 1;}92% {transform: scalex(1);opacity: 1;}100% {transform: scalex(1);opacity: 0;}}@-webkit-keyframes progress2 {0% {transform: scale(0.3, 0.8) translatez(0);opacity: 0;}90% {transform: scale(1, 1) translatex(300px) translatez(0);opacity: 1;}100% {transform: scale(1, 1) translatex(300px) translatez(0);opacity: 0;}}@keyframes progress2 {0% {transform: scale(0.3, 0.8) translatez(0);opacity: 0;}90% {transform: scale(1, 1) translatex(300px) translatez(0);opacity: 1;}100% {transform: scale(1, 1) translatex(300px) translatez(0);opacity: 0;}}.line {position: absolute;top: 50%;width: 300px;left: 50%;margin-left: -150px;height: 3px;background: rgba(255, 255, 255, 0.1);}.line:before {-webkit-animation: progress1 4s infinite;animation: progress1 4s infinite;transform-origin: 0 0;content: "";display: block;width: 300px;height: 100%;background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 10%, rgba(255, 255, 255, 0.4) 80%, white);}.line:after {content: "";position: absolute;-webkit-animation: progress2 4s infinite;animation: progress2 4s infinite;transform-origin: 90% 50%;margin-left: -24px;top: -9px;width: 30px;height: 21px;border-radius: 2px;background: rgba(210, 189, 255, 0.55);filter: blur(8px);box-shadow: 0 0 10px 6px rgba(210, 189, 255, 0.4), -20px 0 15px 4px rgba(117, 75, 206, 0.3), -40px 0 15px 2px rgba(210, 189, 255, 0.2), -60px 0 10px 1px rgba(154, 130, 204, 0.1), -80px 0 10px 1px rgba(210, 189, 255, 0.05);}</style></head><body><div class="line"></div>
</body></html>

CSS 3.0实现时光轴加载动画相关推荐

CSS实现最简洁的加载动画
纯CSS能实现的功能越来越多了,能用css实现的就别用js,今天教大家用最短的代码实现下面这个加载动画,这个加载动画的优势不仅是短小,而且不需要额外的dom元素就可实现,因此在那些异步加载的dom身上 ...
[每天进步一点点~] uni-app css 实现 10种 loading加载动画效果
第一种效果图: 检测动画.gif 需要准备一张下面的底图,因为我写不出这种分成无数线段的圆... 加载loading底图.png 代码: <template><view class ...
css实现圆形进度条加载动画
这里我会把遇到这个需求时的实现过程和遇到的问题记录下来,如果只是要看最终实现结果可直接滑到底部看实现代码. 我们经常可以看到网上有一些圆形进度条跟随数字的变化慢慢变成一个圆,这个动画实际上可以通过纯c ...
HTML+CSS制作Windows启动加载动画
HTML+CSS制作Windows启动加载动画效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">&l ...
css 实现心形加载动画
文章目录前言一.html代码二.css 总结前言心形加载动画提示:以下是本篇文章的代码内容,供大家参考,相互学习一.html代码代码如下: <html><head&g ...
css动画----loading加载动画
今天做项目的时候,一个loading加载动画,让我搞了很长时间,后来ui给了看了一个loading加载源码,仿照着源码,把样式改了一下,成功了,并且通过ui给的链接,发现里面有很多优秀的源码可以借鉴, ...
CSS 3.0实现加载动画
给大家分享一个用CSS 3.0实现加载动画,效果如下: 以下是代码实现,欢迎大家复制.粘贴和收藏. <!DOCTYPE html> <html lang="en" ...
CSS 实现加载动画之四-圆点旋转
原文:CSS 实现加载动画之四-圆点旋转圆点旋转也是加载动画中经常用到的.其实现方式和菊花旋转一样,只不过一个是线条形式,一个是圆点形式.圆点按照固定的旋转角度排列,加上延时的改变透明度的动画就可以 ...
为网格布局图片打造的超炫 CSS 加载动画
今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

CSS 3.0实现时光轴加载动画

CSS 3.0实现时光轴加载动画相关推荐

最新文章

热门文章