html的圆形字体,css字体加载和圆形加载.html
/****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;
position: relative;
}
.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%;
}
}
加載中一鍵復制
編輯
Web IDE
原始數(shù)據(jù)
按行查看
歷史
總結
以上是生活随笔為你收集整理的html的圆形字体,css字体加载和圆形加载.html的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 室内地图有哪些用途？
- 下一篇： cleave.js_使用Cleave.j