网页打开之前的loading动画用css3怎么做 10
我不是想知道动画效果本身怎么做，而是想知道代码怎么组织，动画效果的代码放在哪里，最好给我个简单的示例...
我不是想知道动画效果本身怎么做，而是想知道代码怎么组织，动画效果的代码放在哪里，最好给我个简单的示例
展开
4个回答
展开全部
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
<!--
.loading {
width: 3px; height:3px;
border-radius: 100%; /* 圆角 */
box-shadow: 0 -10px 0 1px #333, /* 上, 1px 扩展 */
10px 0px #333, /* 右 */
0 10px #333, /* 下 */
-10px 0 #333, /* 左 */
-7px -7px 0 .5px #333, /* 左上, 0.5px扩展 */
7px -7px 0 1.5px #333, /* 右上, 1.5px扩展 */
7px 7px #333, /* 右下 */
-7px 7px #333; /* 左下 */
}
.spin {
-webkit-transform: rotate(360deg);
-webkit-animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
.spin {
transform: rotate(360deg);
animation: spin 1s linear infinite;
}
@keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
-->
</style>
</head>
<body>
<div style="padding:30px;">
<div class="loading spin"></div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.spinner9 {
margin: 100px auto;
width: 90px;
height: 60px;
text-align: center;
font-size: 10px;
}
.spinner9 > div {
background-color: #67CF22;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner9 .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner9 .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner9 .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner9 .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
--></style>
<div class="spinner9">
<div class="rect1"> </div>
<div class="rect2"> </div>
<div class="rect3"> </div>
<div class="rect4"> </div>
<div class="rect5"> </div>
</div>
margin: 100px auto;
width: 90px;
height: 60px;
text-align: center;
font-size: 10px;
}
.spinner9 > div {
background-color: #67CF22;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner9 .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner9 .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner9 .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner9 .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
--></style>
<div class="spinner9">
<div class="rect1"> </div>
<div class="rect2"> </div>
<div class="rect3"> </div>
<div class="rect4"> </div>
<div class="rect5"> </div>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style><!--
.spinner9 {
margin: 100px auto;
width: 90px;
height: 60px;
text-align: center;
font-size: 10px;
}
.spinner9 > div {
background-color: #67CF22;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner9 .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner9 .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner9 .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner9 .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
--></style>
<div class="spinner9">
<div class="rect1"> </div>
<div class="rect2"> </div>
<div class="rect3"> </div>
<div class="rect4"> </div>
<div class="rect5"> </div>
</div>
.spinner9 {
margin: 100px auto;
width: 90px;
height: 60px;
text-align: center;
font-size: 10px;
}
.spinner9 > div {
background-color: #67CF22;
height: 100%;
width: 6px;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner9 .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner9 .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner9 .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner9 .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
--></style>
<div class="spinner9">
<div class="rect1"> </div>
<div class="rect2"> </div>
<div class="rect3"> </div>
<div class="rect4"> </div>
<div class="rect5"> </div>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
直接做成flash行不行
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
