100个hr+css组成三维长方形旋转动画效果代码
代码语言：html
所属分类：动画
代码描述：100个hr+css组成三维长方形旋转动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
width: 100vw;
height: 100vh;
background: black;
-webkit-perspective: 300px;
perspective: 300px;
overflow: hidden;
}
.wrapper {
position: absolute;
width: 100px;
height: 100px;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-animation: rotate 60s linear infinite;
animation: rotate 60s linear infinite;
}
.wrapper hr:nth-child(1) {
position: absolute;
left: 0;
width: 150px;
-webkit-animation: hr1 30s ease-in-out -99s infinite alternate;
animation: hr1 30s ease-in-out -99s infinite alternate;
}
@-webkit-keyframes hr1 {
0% {
border: solid 2px #33ff70;
box-shadow: 0 0 5px #56d1dc, 0 0 5px #56d1dc inset;
-webkit-transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(0deg);
transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #ae3ff3;
box-shadow: 0 0 5px #36fcdb, 0 0 5px #36fcdb inset;
-webkit-transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(-41deg);
transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(-41deg);
width: 28px;
}
}
@keyframes hr1 {
0% {
border: solid 2px #33ff70;
box-shadow: 0 0 5px #56d1dc, 0 0 5px #56d1dc inset;
-webkit-transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(0deg);
transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #ae3ff3;
box-shadow: 0 0 5px #36fcdb, 0 0 5px #36fcdb inset;
-webkit-transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(-41deg);
transform: rotatey(4deg) translate3d(-46px, 123px, 10px) rotate(-41deg);
width: 28px;
}
}
.wrapper hr:nth-child(2) {
position: absolute;
left: 0;
width: 150px;
-webkit-animation: hr2 30s ease-in-out -98s infinite alternate;
animation: hr2 30s ease-in-out -98s infinite alternate;
}
@-webkit-keyframes hr2 {
0% {
border: solid 2px #6633ff;
box-shadow: 0 0 5px #333aff, 0 0 5px #333aff inset;
-webkit-transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(0deg);
transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #da33ff;
box-shadow: 0 0 5px #f73b9c, 0 0 5px #f73b9c inset;
-webkit-transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(-175deg);
transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(-175deg);
width: 24px;
}
}
@keyframes hr2 {
0% {
border: solid 2px #6633ff;
box-shadow: 0 0 5px #333aff, 0 0 5px #333aff inset;
-webkit-transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(0deg);
transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #da33ff;
box-shadow: 0 0 5px #f73b9c, 0 0 5px #f73b9c inset;
-webkit-transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(-175deg);
transform: rotatey(22deg) translate3d(120px, -110px, 95px) rotate(-175deg);
width: 24px;
}
}
.wrapper hr:nth-child(3) {
position: absolute;
left: 0;
width: 150px;
-webkit-animation: hr3 30s ease-in-out -97s infinite alternate;
animation: hr3 30s ease-in-out -97s infinite alternate;
}
@-webkit-keyframes hr3 {
0% {
border: solid 2px #33daff;
box-shadow: 0 0 5px #ec46cd, 0 0 5px #ec46cd inset;
-webkit-transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(0deg);
transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #3d33ff;
box-shadow: 0 0 5px #7733ff, 0 0 5px #7733ff inset;
-webkit-transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(-64deg);
transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(-64deg);
width: 20px;
}
}
@keyframes hr3 {
0% {
border: solid 2px #33daff;
box-shadow: 0 0 5px #ec46cd, 0 0 5px #ec46cd inset;
-webkit-transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(0deg);
transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #3d33ff;
box-shadow: 0 0 5px #7733ff, 0 0 5px #7733ff inset;
-webkit-transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(-64deg);
transform: rotatey(70deg) translate3d(-43px, 77px, 68px) rotate(-64deg);
width: 20px;
}
}
.wrapper hr:nth-child(4) {
position: absolute;
left: 0;
width: 150px;
-webkit-animation: hr4 30s ease-in-out -96s infinite alternate;
animation: hr4 30s ease-in-out -96s infinite alternate;
}
@-webkit-keyframes hr4 {
0% {
border: solid 2px #5ff141;
box-shadow: 0 0 5px #aa43ef, 0 0 5px #aa43ef inset;
-webkit-transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(0deg);
transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #ab57db;
box-shadow: 0 0 5px #7751e1, 0 0 5px #7751e1 inset;
-webkit-transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(-37deg);
transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(-37deg);
width: 11px;
}
}
@keyframes hr4 {
0% {
border: solid 2px #5ff141;
box-shadow: 0 0 5px #aa43ef, 0 0 5px #aa43ef inset;
-webkit-transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(0deg);
transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #ab57db;
box-shadow: 0 0 5px #7751e1, 0 0 5px #7751e1 inset;
-webkit-transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(-37deg);
transform: rotatey(70deg) translate3d(150px, -137px, -66px) rotate(-37deg);
width: 11px;
}
}
.wrapper hr:nth-child(5) {
position: absolute;
left: 0;
width: 150px;
-webkit-animation: hr5 30s ease-in-out -95s infinite alternate;
animation: hr5 30s ease-in-out -95s infinite alternate;
}
@-webkit-keyframes hr5 {
0% {
border: solid 2px #e74b87;
box-shadow: 0 0 5px #5b95d7, 0 0 5px #5b95d7 inset;
-webkit-transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(0deg);
transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #33e0ff;
box-shadow: 0 0 5px #8d52e0, 0 0 5px #8d52e0 inset;
-webkit-transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(-198deg);
transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(-198deg);
width: 49px;
}
}
@keyframes hr5 {
0% {
border: solid 2px #e74b87;
box-shadow: 0 0 5px #5b95d7, 0 0 5px #5b95d7 inset;
-webkit-transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(0deg);
transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #33e0ff;
box-shadow: 0 0 5px #8d52e0, 0 0 5px #8d52e0 inset;
-webkit-transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(-198deg);
transform: rotatey(75deg) translate3d(-122px, 15px, -124px) rotate(-198deg);
width: 49px;
}
}
.wrapper hr:nth-child(6) {
position: absolute;
left: 0;
width: 150px;
-webkit-animation: hr6 30s ease-in-out -94s infinite alternate;
animation: hr6 30s ease-in-out -94s infinite alternate;
}
@-webkit-keyframes hr6 {
0% {
border: solid 2px #bb33ff;
box-shadow: 0 0 5px #e433ff, 0 0 5px #e433ff inset;
-webkit-transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(0deg);
transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #33fff5;
box-shadow: 0 0 5px #5fff33, 0 0 5px #5fff33 inset;
-webkit-transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(-242deg);
transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(-242deg);
width: 16px;
}
}
@keyframes hr6 {
0% {
border: solid 2px #bb33ff;
box-shadow: 0 0 5px #e433ff, 0 0 5px #e433ff inset;
-webkit-transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(0deg);
transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #33fff5;
box-shadow: 0 0 5px #5fff33, 0 0 5px #5fff33 inset;
-webkit-transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(-242deg);
transform: rotatey(9deg) translate3d(19px, -93px, -69px) rotate(-242deg);
width: 16px;
}
}
.wrapper hr:nth-child(7) {
position: absolute;
left: 0;
width: 150px;
-webkit-animation: hr7 30s ease-in-out -93s infinite alternate;
animation: hr7 30s ease-in-out -93s infinite alternate;
}
@-webkit-keyframes hr7 {
0% {
border: solid 2px #8241f1;
box-shadow: 0 0 5px #6dff33, 0 0 5px #6dff33 inset;
-webkit-transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(0deg);
transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #33ff63;
box-shadow: 0 0 5px #3363ff, 0 0 5px #3363ff inset;
-webkit-transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(-265deg);
transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(-265deg);
width: 31px;
}
}
@keyframes hr7 {
0% {
border: solid 2px #8241f1;
box-shadow: 0 0 5px #6dff33, 0 0 5px #6dff33 inset;
-webkit-transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(0deg);
transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #33ff63;
box-shadow: 0 0 5px #3363ff, 0 0 5px #3363ff inset;
-webkit-transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(-265deg);
transform: rotatey(90deg) translate3d(-13px, -20px, 6px) rotate(-265deg);
width: 31px;
}
}
.wrapper hr:nth-child(8) {
position: absolute;
left: 0;
width: 150px;
-webkit-animation: hr8 30s ease-in-out -92s infinite alternate;
animation: hr8 30s ease-in-out -92s infinite alternate;
}
@-webkit-keyframes hr8 {
0% {
border: solid 2px #33f1ff;
box-shadow: 0 0 5px #cf33ff, 0 0 5px #cf33ff inset;
-webkit-transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(0deg);
transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #52e065;
box-shadow: 0 0 5px #fe3496, 0 0 5px #fe3496 inset;
-webkit-transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(-225deg);
transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(-225deg);
width: 70px;
}
}
@keyframes hr8 {
0% {
border: solid 2px #33f1ff;
box-shadow: 0 0 5px #cf33ff, 0 0 5px #cf33ff inset;
-webkit-transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(0deg);
transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #52e065;
box-shadow: 0 0 5px #fe3496, 0 0 5px #fe3496 inset;
-webkit-transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(-225deg);
transform: rotatey(14deg) translate3d(-137px, 124px, 4px) rotate(-225deg);
width: 70px;
}
}
.wrapper hr:nth-child(9) {
position: absolute;
left: 0;
width: 150px;
-webkit-animation: hr9 30s ease-in-out -91s infinite alternate;
animation: hr9 30s ease-in-out -91s infinite alternate;
}
@-webkit-keyframes hr9 {
0% {
border: solid 2px #33ffb4;
box-shadow: 0 0 5px #b433ff, 0 0 5px #b433ff inset;
-webkit-transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(0deg);
transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #56dc63;
box-shadow: 0 0 5px #3a76f8, 0 0 5px #3a76f8 inset;
-webkit-transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(-103deg);
transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(-103deg);
width: 49px;
}
}
@keyframes hr9 {
0% {
border: solid 2px #33ffb4;
box-shadow: 0 0 5px #b433ff, 0 0 5px #b433ff inset;
-webkit-transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(0deg);
transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #56dc63;
box-shadow: 0 0 5px #3a76f8, 0 0 5px #3a76f8 inset;
-webkit-transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(-103deg);
transform: rotatey(20deg) translate3d(76px, -54px, -54px) rotate(-103deg);
width: 49px;
}
}
.wrapper hr:nth-child(10) {
position: absolute;
left: 0;
width: 150px;
-webkit-animation: hr10 30s ease-in-out -90s infinite alternate;
animation: hr10 30s ease-in-out -90s infinite alternate;
}
@-webkit-keyframes hr10 {
0% {
border: solid 2px #ff33b1;
box-shadow: 0 0 5px #33a0ff, 0 0 5px #33a0ff inset;
-webkit-transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(0deg);
transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #be33ff;
box-shadow: 0 0 5px #963cf6, 0 0 5px #963cf6 inset;
-webkit-transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(-96deg);
transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(-96deg);
width: 64px;
}
}
@keyframes hr10 {
0% {
border: solid 2px #ff33b1;
box-shadow: 0 0 5px #33a0ff, 0 0 5px #33a0ff inset;
-webkit-transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(0deg);
transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #be33ff;
box-shadow: 0 0 5px #963cf6, 0 0 5px #963cf6 inset;
-webkit-transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(-96deg);
transform: rotatey(62deg) translate3d(74px, -111px, -16px) rotate(-96deg);
width: 64px;
}
}
.wrapper hr:nth-child(11) {
position: absolute;
left: 0;
width: 150px;
-webkit-animation: hr11 30s ease-in-out -89s infinite alternate;
animation: hr11 30s ease-in-out -89s infinite alternate;
}
@-webkit-keyframes hr11 {
0% {
border: solid 2px #b433ff;
box-shadow: 0 0 5px #fc33ff, 0 0 5px #fc33ff inset;
-webkit-transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(0deg);
transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #4fe36c;
box-shadow: 0 0 5px #3aff33, 0 0 5px #3aff33 inset;
-webkit-transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(-166deg);
transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(-166deg);
width: 19px;
}
}
@keyframes hr11 {
0% {
border: solid 2px #b433ff;
box-shadow: 0 0 5px #fc33ff, 0 0 5px #fc33ff inset;
-webkit-transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(0deg);
transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #4fe36c;
box-shadow: 0 0 5px #3aff33, 0 0 5px #3aff33 inset;
-webkit-transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(-166deg);
transform: rotatey(90deg) translate3d(11px, 133px, 0px) rotate(-166deg);
width: 19px;
}
}
.wrapper hr:nth-child(12) {
position: absolute;
left: 0;
width: 150px;
-webkit-animation: hr12 30s ease-in-out -88s infinite alternate;
animation: hr12 30s ease-in-out -88s infinite alternate;
}
@-webkit-keyframes hr12 {
0% {
border: solid 2px #3dff33;
box-shadow: 0 0 5px #3388ff, 0 0 5px #3388ff inset;
-webkit-transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(0deg);
transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #f833ff;
box-shadow: 0 0 5px #56dc89, 0 0 5px #56dc89 inset;
-webkit-transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(-162deg);
transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(-162deg);
width: 51px;
}
}
@keyframes hr12 {
0% {
border: solid 2px #3dff33;
box-shadow: 0 0 5px #3388ff, 0 0 5px #3388ff inset;
-webkit-transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(0deg);
transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #f833ff;
box-shadow: 0 0 5px #56dc89, 0 0 5px #56dc89 inset;
-webkit-transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(-162deg);
transform: rotatey(10deg) translate3d(115px, 140px, -105px) rotate(-162deg);
width: 51px;
}
}
.wrapper hr:nth-child(13) {
position: absolute;
left: 0;
width: 150px;
-webkit-animation: hr13 30s ease-in-out -87s infinite alternate;
animation: hr13 30s ease-in-out -87s infinite alternate;
}
@-webkit-keyframes hr13 {
0% {
border: solid 2px #33ffbb;
box-shadow: 0 0 5px #3ac8f8, 0 0 5px #3ac8f8 inset;
-webkit-transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(0deg);
transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #7237fb;
box-shadow: 0 0 5px #3477fe, 0 0 5px #3477fe inset;
-webkit-transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(-160deg);
transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(-160deg);
width: 71px;
}
}
@keyframes hr13 {
0% {
border: solid 2px #33ffbb;
box-shadow: 0 0 5px #3ac8f8, 0 0 5px #3ac8f8 inset;
-webkit-transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(0deg);
transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #7237fb;
box-shadow: 0 0 5px #3477fe, 0 0 5px #3477fe inset;
-webkit-transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(-160deg);
transform: rotatey(37deg) translate3d(-18px, 92px, 21px) rotate(-160deg);
width: 71px;
}
}
.wrapper hr:nth-child(14) {
position: absolute;
left: 0;
width: 150px;
-webkit-animation: hr14 30s ease-in-out -86s infinite alternate;
animation: hr14 30s ease-in-out -86s infinite alternate;
}
@-webkit-keyframes hr14 {
0% {
border: solid 2px #33ffd6;
box-shadow: 0 0 5px #33ffbe, 0 0 5px #33ffbe inset;
-webkit-transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(0deg);
transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #ff33be;
box-shadow: 0 0 5px #33ffbb, 0 0 5px #33ffbb inset;
-webkit-transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(-58deg);
transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(-58deg);
width: 34px;
}
}
@keyframes hr14 {
0% {
border: solid 2px #33ffd6;
box-shadow: 0 0 5px #33ffbe, 0 0 5px #33ffbe inset;
-webkit-transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(0deg);
transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #ff33be;
box-shadow: 0 0 5px #33ffbb, 0 0 5px #33ffbb inset;
-webkit-transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(-58deg);
transform: rotatey(22deg) translate3d(-26px, -89px, 113px) rotate(-58deg);
width: 34px;
}
}
.wrapper hr:nth-child(15) {
position: absolute;
left: 0;
width: 150px;
-webkit-animation: hr15 30s ease-in-out -85s infinite alternate;
animation: hr15 30s ease-in-out -85s infinite alternate;
}
@-webkit-keyframes hr15 {
0% {
border: solid 2px #6933ff;
box-shadow: 0 0 5px #5ad8d0, 0 0 5px #5ad8d0 inset;
-webkit-transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(0deg);
transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #37fb8f;
box-shadow: 0 0 5px #3358ff, 0 0 5px #3358ff inset;
-webkit-transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(-246deg);
transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(-246deg);
width: 65px;
}
}
@keyframes hr15 {
0% {
border: solid 2px #6933ff;
box-shadow: 0 0 5px #5ad8d0, 0 0 5px #5ad8d0 inset;
-webkit-transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(0deg);
transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #37fb8f;
box-shadow: 0 0 5px #3358ff, 0 0 5px #3358ff inset;
-webkit-transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(-246deg);
transform: rotatey(69deg) translate3d(25px, -34px, -18px) rotate(-246deg);
width: 65px;
}
}
.wrapper hr:nth-child(16) {
position: absolute;
left: 0;
width: 150px;
-webkit-animation: hr16 30s ease-in-out -84s infinite alternate;
animation: hr16 30s ease-in-out -84s infinite alternate;
}
@-webkit-keyframes hr16 {
0% {
border: solid 2px #338bff;
box-shadow: 0 0 5px #9933ff, 0 0 5px #9933ff inset;
-webkit-transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(0deg);
transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #8f33ff;
box-shadow: 0 0 5px #33ff6d, 0 0 5px #33ff6d inset;
-webkit-transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(-170deg);
transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(-170deg);
width: 75px;
}
}
@keyframes hr16 {
0% {
border: solid 2px #338bff;
box-shadow: 0 0 5px #9933ff, 0 0 5px #9933ff inset;
-webkit-transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(0deg);
transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #8f33ff;
box-shadow: 0 0 5px #33ff6d, 0 0 5px #33ff6d inset;
-webkit-transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(-170deg);
transform: rotatey(52deg) translate3d(47px, 112px, -87px) rotate(-170deg);
width: 75px;
}
}
.wrapper hr:nth-child(17) {
position: absolute;
left: 0;
width: 150px;
-webkit-animation: hr17 30s ease-in-out -83s infinite alternate;
animation: hr17 30s ease-in-out -83s infinite alternate;
}
@-webkit-keyframes hr17 {
0% {
border: solid 2px #337eff;
box-shadow: 0 0 5px #5c33ff, 0 0 5px #5c33ff inset;
-webkit-transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(0deg);
transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #33fffc;
box-shadow: 0 0 5px #ff33ff, 0 0 5px #ff33ff inset;
-webkit-transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(-14deg);
transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(-14deg);
width: 55px;
}
}
@keyframes hr17 {
0% {
border: solid 2px #337eff;
box-shadow: 0 0 5px #5c33ff, 0 0 5px #5c33ff inset;
-webkit-transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(0deg);
transform: rotatey(83deg) translate3d(141px, -4px, 0px) rotate(0deg);
height: 20px;
}
100% {
border: solid 2px #33fffc;
box-shadow: 0 0 5px #ff33ff, 0 0 5px #ff33ff inset;
-webkit-transform: rotatey(83deg) translate3d(141px, -4px, 0px) rot.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0