用css3属性制作花瓣loading动画效果
本帖最后由 daowuya 于 2019-5-7 16:49 编辑预览效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>-</title>
<style>
body {
background: #161B29;
margin: 0 auto;
height: 100%;
width: 100%;
overflow: hidden;
}
.container {
width: 40vw;
height: 40vw;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
overflow: hidden;
}
.common {
height: 5vw;
max-height: 100%;
overflow: auto;
width: 2vw;
margin: auto;
max-width: 100%;
position: absolute;
background-color: ;
border-radius: 0vw 10vw 0vw 10vw;
box-shadow: inset 0vw 0vw 0vw .1vw #E645D0, 0vw 0vw 1.5vw 0vw #E645D0;
}
.one {
transform: rotate(45deg);
left: 0;
right: 0;
top: 0;
bottom: 7.5vw;
}
.two {
transform: rotate(90deg);
left: 5.5vw;
right: 0;
top: 0;
bottom: 5.5vw;
}
.three {
transform: rotate(135deg);
left: 7.5vw;
right: 0;
top: 0;
bottom: 0;
}
.four {
transform: rotate(180deg);
left: 5.5vw;
right: 0;
top: 5.5vw;
bottom: 0;
}
.five {
transform: rotate(225deg);
left: 0;
right: 0;
top: 7.5vw;
bottom: 0;
}
.six {
transform: rotate(270deg);
left: 0;
right: 5.5vw;
top: 5.5vw;
bottom: 0;
}
.seven {
transform: rotate(315deg);
left: 0;
right: 7.5vw;
top: 0;
bottom: 0;
}
.eight {
transform: rotate(360deg);
left: 0;
right: 5.5vw;
top: 0;
bottom: 5.5vw;
}
.bar {
width: 12vw;
height: .25vw;
position: absolute;
left: 0;
right: 0;
top: 16vw;
bottom: 0;
margin: auto;
overflow: hidden;
background: #E645D0;
}
.progress {
width: 12vw;
height: .5vw;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
overflow: hidden;
background: #17E1E6;
}
.one {
animation: one 1s ease infinite;
-moz-animation: one 1s ease infinite;
/* Firefox */
-webkit-animation: one 1s ease infinite;
/* Safari and Chrome */
-o-animation: one 1s ease infinite;
/* Opera */
}
@keyframes one {
0%,
100% {}
50% {
background: ;
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
}
}
.two {
animation: two 1s .125s ease infinite;
-moz-animation: two 1s .125s ease infinite;
/* Firefox */
-webkit-animation: two 1s .125s ease infinite;
/* Safari and Chrome */
-o-animation: two 1s .125s ease infinite;
/* Opera */
}
@keyframes two {
0%,
100% {}
50% {
background: ;
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
}
}
.three {
animation: three 1s .25s ease infinite;
-moz-animation: three 1s .25s ease infinite;
/* Firefox */
-webkit-animation: three 1s .25s ease infinite;
/* Safari and Chrome */
-o-animation: three 1s .25s ease infinite;
/* Opera */
}
@keyframes three {
0%,
100% {}
50% {
background: ;
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
}
}
.four {
animation: four 1s .375s ease infinite;
-moz-animation: four 1s .375s ease infinite;
/* Firefox */
-webkit-animation: four 1s .375s ease infinite;
/* Safari and Chrome */
-o-animation: four 1s .375s ease infinite;
/* Opera */
}
@keyframes four {
0%,
100% {}
50% {
background: ;
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
}
}
.five {
animation: five 1s .5s ease infinite;
-moz-animation: five 1s .5s ease infinite;
/* Firefox */
-webkit-animation: five 1s .5s ease infinite;
/* Safari and Chrome */
-o-animation: five 1s .5s ease infinite;
/* Opera */
}
@keyframes five {
0%,
100% {}
50% {
background: ;
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
}
}
.six {
animation: six 1s .625s ease infinite;
-moz-animation: six 1s .625s ease infinite;
/* Firefox */
-webkit-animation: six 1s .625s ease infinite;
/* Safari and Chrome */
-o-animation: six 1s .625s ease infinite;
/* Opera */
}
@keyframes six {
0%,
100% {}
50% {
background: ;
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
}
}
.seven {
animation: seven 1s .750s ease infinite;
-moz-animation: seven 1s .750s ease infinite;
/* Firefox */
-webkit-animation: seven 1s .750s ease infinite;
/* Safari and Chrome */
-o-animation: seven 1s .750s ease infinite;
/* Opera */
}
@keyframes seven {
0%,
100% {}
50% {
background: ;
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
}
}
.eight {
animation: eight 1s .875s ease infinite;
-moz-animation: eight 1s .875s ease infinite;
/* Firefox */
-webkit-animation: eight 1s .875s ease infinite;
/* Safari and Chrome */
-o-animation: eight 1s .875s ease infinite;
/* Opera */
}
@keyframes eight {
0%,
100% {}
50% {
background: ;
box-shadow: inset 0vw 0vw 0vw .1vw #17E1E6, 0vw 0vw 1.5vw 0vw #17E1E6;
}
}
.container {
animation: container 5s linear infinite;
-moz-animation: container 5s linear infinite;
/* Firefox */
-webkit-animation: container 5s linear infinite;
/* Safari and Chrome */
-o-animation: container 5s linear infinite;
/* Opera */
}
@keyframes container {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
.progress {
animation: progress 15s ease;
-moz-animation: progress 15s ease;
/* Firefox */
-webkit-animation: progress 15s ease;
/* Safari and Chrome */
-o-animation: progress 15s ease;
/* Opera */
}
@keyframes progress {
0% {
left: -24vw;
}
10% {
left: -20vw;
}
30% {
left: -16vw;
}
50% {
left: -12vw;
}
65% {
left: -10vw;
}
80% {
left: -4vw;
}
100% {
left: 0;
}
}
.fade-in {
animation: fade-in 2s ease;
-moz-animation: fade-in 2s ease;
/* Firefox */
-webkit-animation: fade-in 2s ease;
/* Safari and Chrome */
-o-animation: fade-in 2s ease;
/* Opera */
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.out {
animation: out 2s 15s ease;
-moz-animation: out 2s 15s ease;
/* Firefox */
-webkit-animation: out 2s 15s ease;
/* Safari and Chrome */
-o-animation: out 2s 15s ease;
/* Opera */
}
@keyframes out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}</style>
</head>
<body>
<div class="out">
<div class="fade-in">
<div class="container">
<div class="one common"></div>
<div class="two common"></div>
<div class="three common"></div>
<div class="four common"></div>
<div class="five common"></div>
<div class="six common"></div>
<div class="seven common"></div>
<div class="eight common"></div>
</div>
<div class="bar">
<div class="progress"></div>
</div>
</div>
<script>
</script>
</body>
</html>
感谢楼主分享，先收藏为敬！！ 学习一下，学习楼主分享 啊，瞬间看懂了吗，没有，哈哈哈，嗝，做这个样式没问题，但是不会让他转。 先存着hhhhhhh 好看诶 收藏起来 说不定就用上了
页:
[1]