css 加载js文字,css js 环形字体,字体异步加载
html:
html>
环形文字的纯js插件
html,
body {
height: 100%;
margin: 0;
overflow: hidden;
background: #EA6D39;;
font-family: 'font84';
overflow-x: hidden;
}
.emblem {
overflow-x: hidden;
position: absolute;
left: 0;
right: 0;
top: 25vh;
margin: 0 auto;
width: 50vh;
height: 50vh;
border-radius: 50%;
color: blueviolet;
text-align: center;
white-space:normal;
}
.emblem div {
position: absolute;
display: inline-block;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-transform: uppercase;
font-size: 4vh;
transition: all 0.5s cubic-bezier(0, 0, 0, 1);
}
.emblem div span{
padding: 10px;
color: #FFFFFF;
}
Emblem.init('.emblem');
// 如果不要引入特殊字体可以删除以下代码
async function loadFonts() {
console.time('加载加载耗时')
const font = new FontFace(
"font84",
"url('./字体.ttf')"
);
await font.load();
document.fonts.add(font);
document.body.classList.add("fonts-loaded");
console.timeEnd('加载加载耗时')
}
loadFonts()
emblem.js:
var Emblem = {
init: function(el, str) {
var element = document.querySelector(el);
var text = str ? str : element.innerHTML;
element.innerHTML = '';
var arr = []
// 旋转的角度在这里调整
for (var i = 0; i
var rdeg = (90 / text.length)*(i) - 90;
arr.push(rdeg)
}
var min = arr[0], max = arr[arr.length - 1];
const pcdeg = (90 - max) / 2 // 偏差度修正
for (var i = 0; i
var r = arr[i] + pcdeg
var x = (Math.PI/text.length).toFixed(0) * (i);
var y = (Math.PI/text.length).toFixed(0) * (i);
var letter = text[i];
var div = document.createElement('div');
var span = document.createElement('span');
var node = document.createTextNode(letter);
span.appendChild(node);
div.appendChild(span);
div.style.webkitTransform = 'rotateZ('+r+'deg) translate3d('+x+'px,'+y+'px,0)';
div.style.transform = 'rotateZ('+r+'deg) translate3d('+x+'px,'+y+'px,0)';
element.appendChild(div);
}
}
};
文中emblem.js来自站长之家,学习分享使用。
css 加载js文字,css js 环形字体,字体异步加载相关推荐
- ajax右侧刷新加载jsp,jsp实现局部刷新页面、异步加载页面的方法
jsp实现局部刷新页面.异步加载页面的方法 局部刷新页面.异步加载页面方案: 1.在jsp页面需要刷新的地方增加一个控件 2.新建一个jsp页面:aaa.jsp(用来放置需要刷新的内容) 3.将id为 ...
- 新手教程:不写JS,在MIP页中实现异步加载数据
从需求谈起:在 MIP 页中异步加载数据 MIP(移动网页加速器) 的 加速原理 除了靠谱的 MIP-Cache CDN 加速外,最值得一提的就是组件系统.所有 JS 交互都需要使用 MIP 组件实现 ...
- 小程序 ajax 加载,小程序实战-小程序网络请求异步加载
最初看到小程序的网络请求的时候,尤其是演示示例中,userInfoReadyCallback这个函数更是一头雾水.其实并不怎么理解.一直很费解.网上各路大侠都有解释,但是就是,不知道是怎么个顺序,而我 ...
- ajax实现向上正在加载,向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)
/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...
- android 图片加载 软引用_android Listview 软引用SoftReference异步加载图片
首先说一下,android系统加载大量图片系统内存溢出的3中解决方法: (1)从网络或本地加载图片的时候,只加载缩略图.这个方法的确能够少占用不少内存,可是它的致命的缺点就是,因为加载的是缩略图,所以 ...
- php怎么给视频加水印,视频怎么加水印 添加文字水印和图片水印 给视频加水印的软件...
昨天由于台风"妮妲"来了深圳,所以在家休息了一天,而且势汹汹的台风"妮妲"于2日03时35分在深圳市大鹏半岛登陆,登陆时风力达到14级,成为近年来正面登陆珠江三 ...
- python异步加载图片_如何在PyQt5中正确异步加载图像?
我在尝试如何在pyqtqlistview中正确地完成异步映像加载.在 我的主小部件由一个Qlistview和一个QLineEdit文本框组成. 我有一个参与者数据库,我使用QAbstractListM ...
- wps怎么把边框加粗_WPS文字表格怎么把表格外框线加粗?
当我们要对word中插入的表格边框进行加粗的话,该如何操作呢?这就是本章的主要内容,脚本之家教大家如何去给word表格编辑进行加粗的方法. 一.对word表格整个表格进行边框加粗: 选中表格,右击-& ...
- 异步加载js的三种方法
js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...
最新文章
- 哈佛博士教你如何摆脱「尬聊」
- SAP ABAP二分查找(binary search)实际问题的深度分析
- 人工智能---机器学习
- 【电子信息复试】考研复试常考问题——软件工程
- android 论坛_如何看待百度android吧萎靡现象与吧主的无所作为
- Reactive(1) 从响应式编程到好莱坞
- HDFS 读取、写入、遍历文件夹获取文件全路径、append
- MATLAB图像处理之图像去模糊处理
- 小区停车管理系统(SQL,JDBC)
- (手动开o2优化)C++ o2优化用法
- Spark中的Driver
- Jetson TK1
- python信用评分卡建模(附代码)
- [论文阅读] Facial Expression Recognition Using Residual Masking Network
- 微信公众号已认证怎么改名字,公众号昵称可以改吗?
- 7、osg中响应键盘鼠标事件以及鼠标和键盘编码表
- 细说——sqlmap
- tk.mybatis的批量插入扩展
- VC++ RLE压缩算法(附源码)
- 辗转相除法Python实现
热门文章
- Google Earth Engine(GEE)——Landsat9的使用和去云分析以青海省为例
- Ubuntu root认证失败解决办法
- Illustrator 教程:如何在 Illustrator 中修改形状?
- 卷积池化操作输出的尺寸大小
- PPNet模型和tf.stop_gradient的用法
- MAC版Android Studio Flutter 环境搭建
- 【STM32项目】- 人体检测(体温、心率、心跳、跌倒检测)
- 多设备智能语音交互—小爱协同唤醒
- vue下载pdf、word、excel、png图片
- 基于asp.net枪弹管理系统的设计与实现#毕业设计