<!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做得小demo，今天給你們分享一下，勿噴哦
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.