直播平台搭建源码，css预加载旋转动画与流光字体

直播平台搭建源码，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预加载旋转动画与流光字体，更多内容欢迎关注之后的文章

直播平台搭建源码，css预加载旋转动画与流光字体相关推荐

好看的css预加载旋转动画与流光字体
今天刚好在做这个功能,就实现一个预加载的动画效果,随手记录一.预加载旋转动画 Html <view class="concentric_round"></vi ...
直播平台搭建源码，uniapp progress进度条
直播平台搭建源码,uniapp progress进度条 .progress-container {height: 20rpx;display: flex;flex-direction: row;ali ...
java毕业生设计在线直播平台计算机源码+系统+mysql+调试部署+lw
java毕业生设计在线直播平台计算机源码+系统+mysql+调试部署+lw java毕业生设计在线直播平台计算机源码+系统+mysql+调试部署+lw 本源码技术栈: 项目架构:B/S架构开发语言: ...
一对一视频直播源码|手机视频直播平台android源码/可打包视频直播
源码介绍一对一视频直播源码|手机视频直播平台android源码集视频.语音.动态.直播.社交等功能于一身. 前端功能说明: 登入注册:手机验证码登入.编辑个人信息.上传头像首页直播:查看主播用户. ...
在线直播系统源码，多图加载成动画的形式如何实现
在线直播系统源码,多图加载成动画的形式如何实现 1.设置 animationDrawable.addFrame(drawable, 1000);//添加图片生成的drawable,时间为1000ms ...
【Android 插件化】Hook 插件化框架 ( 从源码角度分析加载资源流程 | Hook 点选择 | 资源冲突解决方案 )
Android 插件化系列文章目录 [Android 插件化]插件化简介 ( 组件化与插件化 ) [Android 插件化]插件化原理 ( JVM 内存数据 | 类加载流程 ) [Android 插件 ...
Mybatis3源码分析(05)-加载Configuration-加载MappedStatement
2019独角兽企业重金招聘Python工程师标准>>> Mybatis3源码分析(05)-加载Configuration-加载MappedStatement 博客分类: java m ...
springboot集成mybatis源码分析-启动加载mybatis过程（二）
springboot集成mybatis源码分析-启动加载mybatis过程(二) 1.springboot项目最核心的就是自动加载配置,该功能则依赖的是一个注解@SpringBootApplicati ...
页面预加载loading动画，再载入内容
默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容 ...
jsp预加载转圈_30种CSS3炫酷页面预加载loading动画特效（推荐）
这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQuery代码只是用于隐藏加载动画.当你点击页面的任何 ...

直播平台搭建源码，css预加载旋转动画与流光字体

直播平台搭建源码，css预加载旋转动画与流光字体相关推荐

最新文章

热门文章

直播平台搭建源码，css预加载旋转动画 与 流光字体

直播平台搭建源码，css预加载旋转动画 与 流光字体相关推荐

最新文章

热门文章

直播平台搭建源码，css预加载旋转动画与流光字体

直播平台搭建源码，css预加载旋转动画与流光字体相关推荐