您的位置：首页 > Web前端 > CSS

css的小特效

2016-10-24 20:41 302 查看

今天写项目的时候，想起来有些东西加载的时候，需要一些特效，如果用图片的话，比较对页面加载会稍微影响，但是不能没有，不然影响用户体验，所以就想起来以前写的css做得小demo，今天给你们分享一下，勿喷哦

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
.box{
width: 100%;
padding: 3%;
box-sizing: border-box;
overflow: hidden;
}
.box .loader{
width: 30%;
float: left;
height: 200px;
margin-right: 3%;
border: 1px solid #ccc;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.loading-1{
position: relative;
}
.loading-1 i{
position: absolute;
width: 30px;
height: 30px;border-radius: 50%;
background: #CCCCCC;
left:-15px;
top: -15px;
}
.loading-1 i:nth-child(1){
animation: loading-1 1s linear infinite;
}
.loading-1 i:nth-child(2){
animation: loading-1 1.8s linear infinite;
}
.loading-1 i:nth-child(3){
animation: loading-1 2.6s linear infinite;
}
@keyframes loading-1{
0%{transform: scale(0);opacity: 1;}
5%{opacity: 1.5;}
100%{transform: scale(3);opacity: 0;}
}
/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
.loading-2{
position: relative;

}
.loading-2 i{
position: absolute;
border-radius: 50%;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
border-left: 3px solid #333333;
border-right: 3px solid #333333;
}
.loading-2 i:nth-child(1){
width: 40px;
height: 40px;
position: absolute;
top: -20px;
left: -20px;
animation: op 1s linear infinite;
}
.loading-2 i:nth-child(2){
width: 25px;
height: 25px;
position: absolute;
left: -12.5px;
top: -12.5px;
animation: lo 1s linear infinite;
}
@keyframes op{
0%{transform: rotate(0deg) scale(1)}
50%{transform: rotate(180deg) scale(1.5)}
100%{transform: rotate(360deg) scale(1) }
}
@keyframes lo{
0%{transform: rotate(0deg) scale(1) }
50%{transform: rotate(-180deg) scale(0.5)}
100%{transform: rotate(-360deg) scale(1) }
}
/*-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=*/
.loading-3{
position: relative;

}
.loading-3 i{
width: 20px;height: 20px;
border-radius: 50%;background: #333333;
position: absolute;left: -10px;top:-10px;
}
.loading-3 i:nth-child(1){
animation: ko 0.41s linear infinite;
left: -10px;
}
.loading-3 i:nth-child(2){
animation: ko 0.41s linear infinite;
left: -30px;
}
.loading-3 i:nth-child(3){
animation: ok 0.41s linear infinite;
left: -50px;
}
.loading-3 i:nth-child(4){
animation: ko 0.41s linear infinite;
left: 10px;
}
.loading-3 i:nth-child(5){
animation: ko 0.41s linear infinite;
left: 30px;
}
@keyframes ok{
20%{transform: translateY(-20px)}
30%{transform: translateY(-20px) translateX(80px) }
100%{transform: translateY(0px) translateX(80px)}
}

@keyframes ko{
0%{transform: translate(0px);}
100%{transform: translateX(-20px);}
}
</style>
</head>
<body>
<div class="box">
<div class="loader">
<div class="loading-1">
<i></i>
<i></i>
<i></i>
</div>
</div>
<div class="loader">
<div class="loading-2">
<i class="op"></i>
<i class="lo"></i>
</div>
</div>
<div class="loader">
<div class="loading-3">
<i class="ok"></i>
<i class="ko"></i>
<i class="ko"></i>
<i class="ko"></i>
<i class="ko"></i>
</div>
</div>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 布局 css特效

相关文章推荐

新的分享

章节导航