html css前端开发工具：字体加载/圆形加载
摘要：app前端使用php开发工具|web前端开发工具怎么用|web前端可视化开发工具 html 代码 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> &……
app前端使用php开发工具|web前端开发工具怎么用|web前端可视化开发工具
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>最简洁的前端开发工具:文字特效</title>
<style>
/****loading加载*****/
.loading_cover {
width: 100%;
height: 100%;
position: fixed;
z-index: 99999;
background: #f5f5f9;
}
/****圆形加载****/
@keyframes moveover {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.box {
position: relative;
width: 100px;
height: 100px;
/*整体旋转*/
animation: moveover 3s linear infinite;
margin: -110px auto;
overflow: hidden;
}
.box1 {
position: absolute;
width: 50px;
height: 100px;
border-radius: 50px 0 0 50px;
/* 起始最深颜色为 #999，过渡到中间颜色为 #d0cfcf */
background: linear-gradient(#999, #008ED9);
background-color: red;
z-index: 2;
}
.box2 {
position: absolute;
width: 50px;
height: 100px;
border-radius: 0 50px 50px 0;
left: 50%;
/* 过渡到中间颜色为 #d0cfcf 最终末尾颜色为 #eee */
background: linear-gradient(#eee, #008ED9);
z-index: 1;
}
.box3 {
position: absolute;
width: 92px;
height: 92px;
top: 4px;
left: 4px;
border-radius: 50%;
background-color: #fff;
z-index: 2;
}
.box-font {
width: 100px;
height: 100px;
position: relative;
margin: 10px auto;
text-align: center;
line-height: 100px;
z-index: 999;
font-size: 1.2rem;
color: #E9ECED;
}
/*文字上色*/
.box-font::before {
content: attr(data-letters);
position: absolute;
width: 0;
z-index: 2;
color: #008ED9;
overflow: hidden;
white-space: nowrap;
animation: textToColor 1.5s linear infinite;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
@keyframes textToColor {
0% {
width: 0;
}
100% {
width: 56%;
}
}
</style>
</head>
<body>
<div class=”loading_cover”>
<div class=”box-font” data-letters=”加载中”>加载中</div>
<div class=’box’>
<div class=”box1″></div>
<div class=”box2″></div>
<div class=”box3″></div>
</div>
</div>
</body>
web前端开发工具手机|2018前端开发工具用什么|前端开发工具书
» 本文来自：前端开发者 » 《html css前端开发工具：字体加载/圆形加载》
» 本文链接地址：https://www.rokub.com/4189.html
» 您也可以订阅本站：https://www.rokub.com
近期评论