当前位置:首页 > 网站应用 > 正文内容

css3实现不断旋转动画加载,并弹性布局显示

cjw1231年前 (2023-11-01)网站应用1810
<style>
body{
background:#34495e;
display:flex;
justify-content:center;
align-items:center;
height:100vh;
}
.loading{
position:relative;
width:200px;
height:200px;
border-top:10px solid #e74c3c;
border-radius:50%;
animation:rotate 2s linear infinite;
}
.loading::before{
position:absolute;
top:-10px;
left:0;
content:'';
width:200px;
height:200px;
border-top:10px solid #e67e22;
border-radius:50%;
transform:rotate(120deg);
}
.loading::after{
position:absolute;
top:-10px;
left:0;
content:'';
width:200px;
height:200px;
border-top:10px solid #3498bd;
border-radius:50%;
transform:rotate(240deg);
}
span{
position:absolute;
width:200px;
height:200px;
line-height:200px;
text-align:center;
color:white;
animation:rotateR 2s linear infinite;
}
@keyframes rotate{
to{
 transform:rotate(360deg);
}
}
@keyframes rotateR{
to{
 transform:rotate(-360deg);
}
}
</style>
<div class="loading">
	<span>loading</span>
</div>
<!--
伪元素大小只受内容影响,用定位的方式脱离文档流,所以要用positon,再用top调整位置,此时3个弧重合在一起。再旋转120、240,各自占1/3份
再加动画,省from
此时,span也跟着转,使其正中显示(垂直、水平居中),再加个反之转的动画,平衡之
最后,再之整个在正中显示,即弹性布局-->


扫描二维码推送至手机访问。

版权声明:本文由追求完美发布,如需转载请注明出处。

本文链接:https://cjw123.com/blog/?id=27

标签: html
分享给朋友:

相关文章

网站调整公告

        网站开通了也有三年多了,网站也进行了多次的改版,昨天是我生日嫌着没事在家里把网站再进行了一次改版,当大家再次访问网站时,网站已经换上了全新的衣裳,这次的改版也将意味着我自己也会以一个全新的面貌展现,在我过去的一岁里...

html meta标签屏蔽搜索引擎的用法

html页面中的 meta 标签可以用来识别搜索引擎的蜘蛛类型,可以规定meta标签所在的html页面是否被蜘蛛抓取,下面是这个meta标签的用法,大家可以借鉴一下。搜索引擎的 meta 标签的解析下面是meta标签对搜索引擎的解析<meta name='robot...

js实现公告文字标题无缝向上滚动特效

<HTML> <HEAD> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <TITLE>无间隙文字向上滚动特效...

分享一些可用的网站生成图片接口地址(网站截图api接口)

做导航网站时,处于设计需要及提高用户体验,可能需要给网站截图以调用显示,这就需要把网站生成图片,手动操作可以使用截图工具,或是使用谷歌浏览器开发者工具命令screenshot来生成网站截图,也可使用一些在线网站生成图片的工具,这些都可以把网站生成图片,那么如何自动为网站生成图片?网址截图api接口又...

中秋贺卡

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">...

js打印文字打字输出特效代码

<center> <style type="text/css"> .a{background:#666666; border:0px solid #000000; width:300px; h...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。