好看的css预加载旋转动画与流光字体

今天刚好在做这个功能，就实现一个预加载的动画效果，随手记录

一、预加载旋转动画

Html

<view class="concentric_round"></view>

css

body {background-color: #e9967a;
}
.concentric_round {width: 200rpx;height: 200rpx;position: relative;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -100%);
}
.concentric_round::after,
.concentric_round::before {content: '';display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: #fff;opacity: 0.4;border-radius: 100%;
}.concentric_round::before {width: 50%;height: 50%;animation: beform_round 0.6s ease-in-out infinite alternate;
}.concentric_round::after {width: 100%;height: 100%;animation: after_round 0.6s ease-in-out infinite alternate;
}
/* 外圆 */
@-webkit-keyframes after_round {0% {transform: translate3d(-50%, -50%, 0) scale(1.3);}100% {transform: translate3d(-50%, -50%, 0) scale(1);}
}
@keyframes after_round {0% {transform: translate3d(-50%, -50%, 0) scale(1.3);}100% {transform: translate3d(-50%, -50%, 0) scale(1);}
}
/* 内圆 */
@-webkit-keyframes beform_round {0% {transform: translate3d(-50%, -50%, 0) scale(0.7);}100% {transform: translate3d(-50%, -50%, 0) scale(1);}
}
@keyframes beform_round {0% {transform: translate3d(-50%, -50%, 0) scale(0.7);}100% {transform: translate3d(-50%, -50%, 0) scale(1);}
}

二、流光字体动画

html

<view class="preload">F-REWARD</view>

css

.preload {width: 100%;font-weight: bold;font-family: 'Arial', 'Microsoft YaHei', '黑体', '宋体', sans-serif;font-size: 2.5rem;text-align: center;background-image: -webkit-linear-gradient(left, black, transparent 25%, black 50%, transparent 75%, black);-webkit-text-fill-color: transparent;-webkit-background-clip: text;-webkit-background-size: 200% 100%;-webkit-animation: masked-animation 2s infinite linear;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -100%);
}
@-webkit-keyframes masked-animation {0% {background-position: 0 0;}100% {background-position: -100% 0;}
}

好看的css预加载旋转动画与流光字体相关推荐

jsp预加载转圈_30种CSS3炫酷页面预加载loading动画特效（推荐）
这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQuery代码只是用于隐藏加载动画.当你点击页面的任何 ...
页面预加载loading动画，再载入内容
默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容 ...
html 载入中,用纯CSS实现加载中动画效果
今天要介绍的是用简单的CSS--只用CSS,不用Gif--制作"加载中-"动画效果.先看看效果: 上面的这个加载中效果,以前是用gif动图实现的,但随着CSS的进步,CSS动画功能 ...
【第1159期】CSS预加载Preload
前言看天气预报,今天好多地方都开始下雪了.今日早读文章由@李斌分享. 正文从这开始- Preload 作为一个新的web标准,旨在提高性能和为web开发人员提供更细粒度的加载控制.Preload使开 ...
css编写加载页面动画效果
一.html代码 <div id="loader-wrapper"><div id="loader" ...
快乐前端-图片预加载
前言正所谓金三银四五吃土,因此这些天几个前端技术群讨论最多的话题就是面试题了.某日群内讨论一道面试题:"前端如何实现大量图片预加载以及预加载进度动画进度条显示?" 恰巧本人以前j ...
超详细的图片预加载和懒加载教程
最近接手一个项目 . 结果光安装依赖都出现了一堆麻烦 . 好不容易处理完一个 , 又来一个 .头疼啊看到之前有一些预加载的学习笔记.于是又查查找找 ,想想写写把预加载和懒加载的笔记写完整发现制 ...
【3D动态思维导图制作软件】万彩脑图大师教程 | 思维导图预加载设置
在万彩脑图大师中,你可以自定义预加载信息,让你的思维导图更具特色.使用此软件定义预加载信息主要有两种方法, 具体请看下面的操作: 方法一:点击菜单栏中的"编辑",在下拉菜单上选择& ...
【动态ppt制作软件】Focusky教程 | 设置预加载信息
Focusky(以下简称"FS软件")多媒体演示制作大师允许用户自定义预加载信息,让幻灯片更具特色.在Focusky演示软件上定义预加载信息主要有两种方法: 方法一:点击菜单栏中的 ...

好看的css预加载旋转动画与流光字体

一、预加载旋转动画

Html

css

二、流光字体动画

html

css

好看的css预加载旋转动画与流光字体相关推荐

最新文章

热门文章

好看的css预加载旋转动画 与 流光字体

一、预加载旋转动画

Html

css

二、流光字体动画

html

css

好看的css预加载旋转动画 与 流光字体相关推荐

最新文章

热门文章

好看的css预加载旋转动画与流光字体

好看的css预加载旋转动画与流光字体相关推荐