1:爱的魔力转圈圈
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,html{
padding:0;
margin:0;
width:100%;
height:100%;
background: black;
}
.fan{
position: relative;
width:500px;
height:500px;
margin:100px auto;
}
.f{
position: relative;
width:90%;
height:90%;
margin:5%;
border:1px dashed white;
border-radius: 50%;
box-sizing: border-box;
}
.f:before{
content: "";
position: absolute;
left:-2px;
top:-1px;
width:100%;
height:100%;
border:2px solid;
border-radius: 50%;
border-color: transparent transparent transparent rgba(178, 52, 235, 0.88);
}
.f:after{
content: "";
position: absolute;
left:-2px;
top:-1px;
width:100%;
height:100%;
border:2px solid;
border-radius: 50%;
border-color: transparent #fff421 transparent transparent ;
}
@keyframes f_info {
from{
transform: rotatez(0deg);
}
to{
transform: rotatez(360deg);
}
}
.f1{
animation:f_info 5s linear infinite ;
}
.f2{
animation:f_info 5s linear infinite ;
}
.f3{
animation:f_info 5s linear infinite ;
}
.f4{
animation:f_info 5s linear infinite ;
}
.f5{
animation:f_info 5s linear infinite ;
}
.f6{
animation:f_info 5s linear infinite ;
}
.f7{
animation:f_info 5s linear infinite ;
}
.f8{
animation:f_info 5s linear infinite ;
}
.f9{
animation:f_info 5s linear infinite ;
}
.f10{
animation:f_info 5s linear infinite ;
}
.f11{
animation:f_info 5s linear infinite ;
}
.f12{
animation:f_info 5s linear infinite ;
}
</style>
</head>
<body>
<div class="fan">
<div class="f f1">
<div class="f f2">
<div class="f f3">
<div class="f f4">
<div class="f f5">
<div class="f f6">
<div class="f f7">
<div class="f f8">
<div class="f f9">
<div class="f f10">
<div class="f f11">
<div class="f f12">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2:弹簧动画
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,html{
padding:0;
margin:0;
width:100%;
height:100%;
background: #000000;
}
.fan{
position: relative;
width:500px;
height:500px;
margin:100px auto;
transform: rotatex(80deg);
}
.f{
width:90%;
height:90%;
margin:5%;
border:2px dashed white;
box-sizing: border-box;
border-radius: 50%;
}
@keyframes fa_mi {
0%{
transform:translatey(0px)
}
25%{
transform:translatey(200px)
}
75%{
transform:translatey(-200px)
}
100%{
transform:translatey(0px)
}
}
.f1{
animation: fa_mi 1s linear infinite;
border-color: #ac00f9;
}
.f2{
animation: fa_mi 1s linear infinite;
border-color: #3d00dd;
}
.f3{
animation: fa_mi 1s linear infinite;
border-color: #ef01f9;
}
.f4{
animation: fa_mi 1s linear infinite;
border-color: #f90046;
}
.f5{
animation: fa_mi 1s linear infinite;
border-color: #de0800;
}
.f6{
animation: fa_mi 1s linear infinite;
border-color: #f19702;
}
.f7{
animation: fa_mi 1s linear infinite;
border-color: #fdf30c;
}
.f8{
animation: fa_mi 1s linear infinite;
border-color: #cdf104;
}
.f9{
animation: fa_mi 1s linear infinite;
border-color: #3dea0e;
}
.f10{
animation: fa_mi 1s linear infinite;
border-color: #07e400;
}
.f11{
animation: fa_mi 1s linear infinite;
border-color: #00f40c;
}
.f12{
animation: fa_mi 1s linear infinite;
border-color: #1cdd97;
}
.f13{
animation: fa_mi 1s linear infinite;
border-color: #07c4f3;
}
.f14{
animation: fa_mi 1s linear infinite;
border-color: #166ef9;
}
.f15{
animation: fa_mi 1s linear infinite;
border-color: #0003f9;
}
.f16{
animation: fa_mi 1s linear infinite;
border-color: #5300df;
}
</style>
</head>
<body>
<div class="fan">
<div class="f f1">
<div class="f f2">
<div class="f f3">
<div class="f f4">
<div class="f f5">
<div class="f f6">
<div class="f f7">
<div class="f f8">
<div class="f f9">
<div class="f f10">
<div class="f f11">
<div class="f f12">
<div class="f f13">
<div class="f f14">
<div class="f f15">
<div class="f f16">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
同级弹簧
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>同级弹簧</title>
<style>
body,html{
padding:0;
margin:0;
width:100%;
height:100%;
background: #000000;
}
.m{
position: relative;
width:500px;
height:500px;
margin:100px auto;
transform: rotatex(80deg);
}
.mi{
position: absolute;
border:2px dashed ;
border-radius: 50%;
box-sizing: border-box;
}
@keyframes mi_ni {
0%{
transform: translatey(0);
}
25%{
transform: translatey(200px);
}
75%{
transform: translatey(-200px);
}
100%{
transform: translatey(0);
}
}
.m1{
width:90%;
height:90%;
margin:5%;
animation: mi_ni 1s 1700ms linear infinite;
border-color: #ff0232;
}
.m2{
width:85%;
height:85%;
margin:7.5%;
animation: mi_ni 1s 1600ms linear infinite;
border-color: #f81710;
}
.m3{
width:80%;
height:80%;
margin:10%;
animation: mi_ni 1s 1500ms linear infinite;
border-color: #ff690c;
}
.m4{
width:75%;
height:75%;
margin:12.5%;
animation: mi_ni 1s 1400ms linear infinite;
border-color: #fffb01;
}
.m5{
width:70%;
height:70%;
margin:15%;
animation: mi_ni 1s 1300ms linear infinite;
border-color: #a6ea00;
}
.m6{
width:65%;
height:65%;
margin:17.5%;
animation: mi_ni 1s 1200ms linear infinite;
border-color: #26ff00;
}
.m7{
width:60%;
height:60%;
margin:20%;
animation: mi_ni 1s 1100ms linear infinite;
border-color: #00ff0d;
}
.m8 {
width: 55%;
height: 55%;
margin: 22.5%;
animation: mi_ni 1s 1000ms linear infinite;
border-color: #00f279;
}
.m9{
width:50%;
height:50%;
margin:25%;
animation: mi_ni 1s 900ms linear infinite;
border-color: #00f7c1;
}
.m10{
width:45%;
height:45%;
margin:27.5%;
animation: mi_ni 1s 800ms linear infinite;
border-color: #00efff;
}
.m11{
width:40%;
height:40%;
margin:30%;
animation: mi_ni 1s 700ms linear infinite;
border-color: #006dff;
}
.m12{
width:35%;
height:35%;
margin:32.5%;
animation: mi_ni 1s 600ms linear infinite;
border-color: #9200ff;
}
.m13{
width:30%;
height:30%;
margin:35%;
animation: mi_ni 1s 500ms linear infinite;
border-color: #3200ff;
}
.m14{
width:25%;
height:25%;
margin:37.5%;
animation: mi_ni 1s 400ms linear infinite;
border-color: #7a2fa8;
}
.m15{
width:20%;
height:20%;
margin:40%;
animation: mi_ni 1s 300ms linear infinite;
border-color: #b35ab9;
}
.m16{
width:15%;
height:15%;
margin:42.5%;
animation: mi_ni 1s 200ms linear infinite;
border-color: #dd008e;
}
.m17{
width:10%;
height:10%;
margin:45%;
animation: mi_ni 1s 100ms linear infinite;
border-color: #ae389f;
}
.m18{
width:5%;
height:5%;
margin:47.5%;
animation: mi_ni 1s 0ms linear infinite;
border-color: #dc20c5;
}
</style>
</head>
<body>
<div class="m">
<div class="mi m1"></div>
<div class="mi m2"></div>
<div class="mi m3"></div>
<div class="mi m4"></div>
<div class="mi m5"></div>
<div class="mi m6"></div>
<div class="mi m7"></div>
<div class="mi m8"></div>
<div class="mi m9"></div>
<div class="mi m10"></div>
<div class="mi m11"></div>
<div class="mi m12"></div>
<div class="mi m13"></div>
<div class="mi m14"></div>
<div class="mi m15"></div>
<div class="mi m16"></div>
<div class="mi m17"></div>
<div class="mi m18"></div>
</div>
</body>
</html>
效果好像不太完美,但是把学习的知识都用上啦,要好好努力,认真构思,学会创作更有灵魂的东西