温馨提示×

温馨提示×

您好，登录后才能下订单哦！

密码登录×

忘记密码？

登录注册×

获取短信验证码

其他方式登录

点击登录注册即表示同意《亿速云用户服务条款》

用户登录×

账户密码登录

请使用微信扫描上方二维码

使用帮助

请求超时！

请点击重新获取二维码

过渡效果 loding 动画 animation

发布时间：2020-07-22 14:52:17 来源：网络阅读：570 作者：小仙女KOMons 栏目：web开发

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title></title>
<style>

{
margin: 0px;
padding: 0px;
}
.Load {
margin: auto;
margin-top: 200px;
width: 240px;
height: 20px;
padding: 5px;
}
.Load div {
float: left;
margin: 0 10px;
width: 20px;
height: 20px;
background: #F95F4A;
border-radius: 50%;
}
@keyframes myfirst1 {
90% {
background: #fff;
}
}
@keyframes myfirst2 {
90% {
background: #fff;
}
}
@keyframes myfirst3 {
90% {
background: #fff;
}
}
@keyframes myfirst4 {
90% {
background: #fff;
}
}
@keyframes myfirst5 {
90% {
background: #fff;
}
}
@keyframes myfirst6 {
90% {
background: #fff;
}
}
.Dot1 {
animation: myfirst1 1.8s infinite;
animation-delay: 0.3s;
}
.Dot2 {
animation: myfirst1 1.8s infinite;
animation-delay: 0.6s;
}
.Dot3 {
animation: myfirst1 1.8s infinite;
animation-delay: 0.9s;
}
.Dot4 {
animation: myfirst1 1.8s infinite;
animation-delay: 1.2s;
}
.Dot5 {
animation: myfirst1 1.8s infinite;
animation-delay: 1.5s;
}
.Dot6 {
animation: myfirst1 1.8s infinite;
animation-delay: 1.8s;
}
</style>
</head>
<body>
<div class="Load">
<div class="Dot1"></div>
<div class="Dot2"></div>
<div class="Dot3"></div>
<div class="Dot4"></div>
<div class="Dot5"></div>
<div class="Dot6"></div>
</div>
</body>
</html>

向AI问一下细节

推荐阅读：

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

上一篇新闻：
Oracle11g 基于linux 6.3下安装
下一篇新闻：
Python pandas向excel添加数据的方法

猜你喜欢

AI
助
手

产品服务

地区划分

专题活动

帮助支持

关于我们

售后咨询

7*24小时在线电话：400-100-2938

7*24小时在线 QQ：800811969

关注亿速云

亿速云公众号

手机网站二维码