div+css实现蓝色长条折叠动画效果代码
代码语言：html
所属分类：动画
代码描述：div+css实现蓝色长条折叠动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body, html {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
background: linear-gradient(#4f2187, #0e0031);
}
div {
position: absolute;
bottom: 0;
left: 0;
}
@-webkit-keyframes boxes {
0% {
transform: translate(1044px, 0);
}
100% {
transform: translate(1960px, 0);
}
}
@keyframes boxes {
0% {
transform: translate(1044px, 0);
}
100% {
transform: translate(1960px, 0);
}
}
@-webkit-keyframes boxes_0 {
0% {
transform: translate(553px, 0);
}
50% {
transform: translate(1542px, 0);
}
100% {
transform: translate(553px, 0);
}
}
@keyframes boxes_0 {
0% {
transform: translate(553px, 0);
}
50% {
transform: translate(1542px, 0);
}
100% {
transform: translate(553px, 0);
}
}
div:nth-child(0) {
height: 50%;
width: 80px;
transform: translate(1190px, 0);
-webkit-animation: boxes_0 89s infinite;
animation: boxes_0 89s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_1 {
0% {
transform: translate(950px, 0);
}
50% {
transform: translate(602px, 0);
}
100% {
transform: translate(950px, 0);
}
}
@keyframes boxes_1 {
0% {
transform: translate(950px, 0);
}
50% {
transform: translate(602px, 0);
}
100% {
transform: translate(950px, 0);
}
}
div:nth-child(1) {
height: 26%;
width: 82px;
transform: translate(1890px, 0);
-webkit-animation: boxes_1 101s infinite;
animation: boxes_1 101s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_2 {
0% {
transform: translate(1362px, 0);
}
50% {
transform: translate(1638px, 0);
}
100% {
transform: translate(1362px, 0);
}
}
@keyframes boxes_2 {
0% {
transform: translate(1362px, 0);
}
50% {
transform: translate(1638px, 0);
}
100% {
transform: translate(1362px, 0);
}
}
div:nth-child(2) {
height: 15%;
width: 67px;
transform: translate(145px, 0);
-webkit-animation: boxes_2 104s infinite;
animation: boxes_2 104s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_3 {
0% {
transform: translate(1275px, 0);
}
50% {
transform: translate(328px, 0);
}
100% {
transform: translate(1275px, 0);
}
}
@keyframes boxes_3 {
0% {
transform: translate(1275px, 0);
}
50% {
transform: translate(328px, 0);
}
100% {
transform: translate(1275px, 0);
}
}
div:nth-child(3) {
height: 11%;
width: 107px;
transform: translate(1422px, 0);
-webkit-animation: boxes_3 85s infinite;
animation: boxes_3 85s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_4 {
0% {
transform: translate(1403px, 0);
}
50% {
transform: translate(1754px, 0);
}
100% {
transform: translate(1403px, 0);
}
}
@keyframes boxes_4 {
0% {
transform: translate(1403px, 0);
}
50% {
transform: translate(1754px, 0);
}
100% {
transform: translate(1403px, 0);
}
}
div:nth-child(4) {
height: 47%;
width: 98px;
transform: translate(1883px, 0);
-webkit-animation: boxes_4 72s infinite;
animation: boxes_4 72s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_5 {
0% {
transform: translate(1208px, 0);
}
50% {
transform: translate(1839px, 0);
}
100% {
transform: translate(1208px, 0);
}
}
@keyframes boxes_5 {
0% {
transform: translate(1208px, 0);
}
50% {
transform: translate(1839px, 0);
}
100% {
transform: translate(1208px, 0);
}
}
div:nth-child(5) {
height: 16%;
width: 60px;
transform: translate(449px, 0);
-webkit-animation: boxes_5 80s infinite;
animation: boxes_5 80s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_6 {
0% {
transform: translate(683px, 0);
}
50% {
transform: translate(739px, 0);
}
100% {
transform: translate(683px, 0);
}
}
@keyframes boxes_6 {
0% {
transform: translate(683px, 0);
}
50% {
transform: translate(739px, 0);
}
100% {
transform: translate(683px, 0);
}
}
div:nth-child(6) {
height: 13%;
width: 96px;
transform: translate(168px, 0);
-webkit-animation: boxes_6 70s infinite;
animation: boxes_6 70s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_7 {
0% {
transform: translate(1638px, 0);
}
50% {
transform: translate(1487px, 0);
}
100% {
transform: translate(1638px, 0);
}
}
@keyframes boxes_7 {
0% {
transform: translate(1638px, 0);
}
50% {
transform: translate(1487px, 0);
}
100% {
transform: translate(1638px, 0);
}
}
div:nth-child(7) {
height: 61%;
width: 63px;
transform: translate(700px, 0);
-webkit-animation: boxes_7 79s infinite;
animation: boxes_7 79s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_8 {
0% {
transform: translate(25px, 0);
}
50% {
transform: translate(548px, 0);
}
100% {
transform: translate(25px, 0);
}
}
@keyframes boxes_8 {
0% {
transform: translate(25px, 0);
}
50% {
transform: translate(548px, 0);
}
100% {
transform: translate(25px, 0);
}
}
div:nth-child(8) {
height: 15%;
width: 74px;
transform: translate(1198px, 0);
-webkit-animation: boxes_8 51s infinite;
animation: boxes_8 51s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_9 {
0% {
transform: translate(322px, 0);
}
50% {
transform: translate(850px, 0);
}
100% {
transform: translate(322px, 0);
}
}
@keyframes boxes_9 {
0% {
transform: translate(322px, 0);
}
50% {
transform: translate(850px, 0);
}
100% {
transform: translate(322px, 0);
}
}
div:nth-child(9) {
height: 49%;
width: 51px;
transform: translate(1711px, 0);
-webkit-animation: boxes_9 62s infinite;
animation: boxes_9 62s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_10 {
0% {
transform: translate(716px, 0);
}
50% {
transform: translate(5px, 0);
}
100% {
transform: translate(716px, 0);
}
}
@keyframes boxes_10 {
0% {
transform: translate(716px, 0);
}
50% {
transform: translate(5px, 0);
}
100% {
transform: translate(716px, 0);
}
}
div:nth-child(10) {
height: 23%;
width: 102px;
transform: translate(520px, 0);
-webkit-animation: boxes_10 100s infinite;
animation: boxes_10 100s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_11 {
0% {
transform: translate(955px, 0);
}
50% {
transform: translate(382px, 0);
}
100% {
transform: translate(955px, 0);
}
}
@keyframes boxes_11 {
0% {
transform: translate(955px, 0);
}
50% {
transform: translate(382px, 0);
}
100% {
transform: translate(955px, 0);
}
}
div:nth-child(11) {
height: 48%;
width: 95px;
transform: translate(248px, 0);
-webkit-animation: boxes_11 91s infinite;
animation: boxes_11 91s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_12 {
0% {
transform: translate(885px, 0);
}
50% {
transform: translate(126px, 0);
}
100% {
transform: translate(885px, 0);
}
}
@keyframes boxes_12 {
0% {
transform: translate(885px, 0);
}
50% {
transform: translate(126px, 0);
}
100% {
transform: translate(885px, 0);
}
}
div:nth-child(12) {
height: 24%;
width: 61px;
transform: translate(723px, 0);
-webkit-animation: boxes_12 86s infinite;
animation: boxes_12 86s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_13 {
0% {
transform: translate(393px, 0);
}
50% {
transform: translate(548px, 0);
}
100% {
transform: translate(393px, 0);
}
}
@keyframes boxes_13 {
0% {
transform: translate(393px, 0);
}
50% {
transform: translate(548px, 0);
}
100% {
transform: translate(393px, 0);
}
}
div:nth-child(13) {
height: 37%;
width: 65px;
transform: translate(1907px, 0);
-webkit-animation: boxes_13 72s infinite;
animation: boxes_13 72s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_14 {
0% {
transform: translate(1935px, 0);
}
50% {
transform: translate(799px, 0);
}
100% {
transform: translate(1935px, 0);
}
}
@keyframes boxes_14 {
0% {
transform: translate(1935px, 0);
}
50% {
transform: translate(799px, 0);
}
100% {
transform: translate(1935px, 0);
}
}
div:nth-child(14) {
height: 23%;
width: 98px;
transform: translate(1367px, 0);
-webkit-animation: boxes_14 68s infinite;
animation: boxes_14 68s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_15 {
0% {
transform: translate(529px, 0);
}
50% {
transform: translate(822px, 0);
}
100% {
transform: translate(529px, 0);
}
}
@keyframes boxes_15 {
0% {
transform: translate(529px, 0);
}
50% {
transform: translate(822px, 0);
}
100% {
transform: translate(529px, 0);
}
}
div:nth-child(15) {
height: 65%;
width: 89px;
transform: translate(978px, 0);
-webkit-animation: boxes_15 74s infinite;
animation: boxes_15 74s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_16 {
0% {
transform: translate(561px, 0);
}
50% {
transform: translate(761px, 0);
}
100% {
transform: translate(561px, 0);
}
}
@keyframes boxes_16 {
0% {
transform: translate(561px, 0);
}
50% {
transform: translate(761px, 0);
}
100% {
transform: translate(561px, 0);
}
}
div:nth-child(16) {
height: 25%;
width: 97px;
transform: translate(214px, 0);
-webkit-animation: boxes_16 54s infinite;
animation: boxes_16 54s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_17 {
0% {
transform: translate(1103px, 0);
}
50% {
transform: translate(1065px, 0);
}
100% {
transform: translate(1103px, 0);
}
}
@keyframes boxes_17 {
0% {
transform: translate(1103px, 0);
}
50% {
transform: translate(1065px, 0);
}
100% {
transform: translate(1103px, 0);
}
}
div:nth-child(17) {
height: 69%;
width: 88px;
transform: translate(416px, 0);
-webkit-animation: boxes_17 86s infinite;
animation: boxes_17 86s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_18 {
0% {
transform: translate(1521px, 0);
}
50% {
transform: translate(171px, 0);
}
100% {
transform: translate(1521px, 0);
}
}
@keyframes boxes_18 {
0% {
transform: translate(1521px, 0);
}
50% {
transform: translate(171px, 0);
}
100% {
transform: translate(1521px, 0);
}
}
div:nth-child(18) {
height: 41%;
width: 56px;
transform: translate(1969px, 0);
-webkit-animation: boxes_18 66s infinite;
animation: boxes_18 66s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_19 {
0% {
transform: translate(1294px, 0);
}
50% {
transform: translate(1363px, 0);
}
100% {
transform: translate(1294px, 0);
}
}
@keyframes boxes_19 {
0% {
transform: translate(1294px, 0);
}
50% {
transform: translate(1363px, 0);
}
100% {
transform: translate(1294px, 0);
}
}
div:nth-child(19) {
height: 45%;
width: 77px;
transform: translate(653px, 0);
-webkit-animation: boxes_19 63s infinite;
animation: boxes_19 63s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_20 {
0% {
transform: translate(38px, 0);
}
50% {
transform: translate(1615px, 0);
}
100% {
transform: translate(38px, 0);
}
}
@keyframes boxes_20 {
0% {
transform: translate(38px, 0);
}
50% {
transform: translate(1615px, 0);
}
100% {
transform: translate(38px, 0);
}
}
div:nth-child(20) {
height: 12%;
width: 84px;
transform: translate(1055px, 0);
-webkit-animation: boxes_20 64s infinite;
animation: boxes_20 64s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_21 {
0% {
transform: translate(1818px, 0);
}
50% {
transform: translate(326px, 0);
}
100% {
transform: translate(1818px, 0);
}
}
@keyframes boxes_21 {
0% {
transform: translate(1818px, 0);
}
50% {
transform: translate(326px, 0);
}
100% {
transform: translate(1818px, 0);
}
}
div:nth-child(21) {
height: 13%;
width: 55px;
transform: translate(1206px, 0);
-webkit-animation: boxes_21 84s infinite;
animation: boxes_21 84s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_22 {
0% {
transform: translate(1002px, 0);
}
50% {
transform: translate(948px, 0);
}
100% {
transform: translate(1002px, 0);
}
}
@keyframes boxes_22 {
0% {
transform: translate(1002px, 0);
}
50% {
transform: translate(948px, 0);
}
100% {
transform: translate(1002px, 0);
}
}
div:nth-child(22) {
height: 57%;
width: 55px;
transform: translate(351px, 0);
-webkit-animation: boxes_22 63s infinite;
animation: boxes_22 63s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_23 {
0% {
transform: translate(246px, 0);
}
50% {
transform: translate(829px, 0);
}
100% {
transform: translate(246px, 0);
}
}
@keyframes boxes_23 {
0% {
transform: translate(246px, 0);
}
50% {
transform: translate(829px, 0);
}
100% {
transform: translate(246px, 0);
}
}
div:nth-child(23) {
height: 17%;
width: 66px;
transform: translate(2000px, 0);
-webkit-animation: boxes_23 79s infinite;
animation: boxes_23 79s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_24 {
0% {
transform: translate(71px, 0);
}
50% {
transform: translate(1868px, 0);
}
100% {
transform: translate(71px, 0);
}
}
@keyframes boxes_24 {
0% {
transform: translate(71px, 0);
}
50% {
transform: translate(1868px, 0);
}
100% {
transform: translate(71px, 0);
}
}
div:nth-child(24) {
height: 22%;
width: 64px;
transform: translate(1404px, 0);
-webkit-animation: boxes_24 65s infinite;
animation: boxes_24 65s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_25 {
0% {
transform: translate(268px, 0);
}
50% {
transform: translate(163px, 0);
}
100% {
transform: translate(268px, 0);
}
}
@keyframes boxes_25 {
0% {
transform: translate(268px, 0);
}
50% {
transform: translate(163px, 0);
}
100% {
transform: translate(268px, 0);
}
}
div:nth-child(25) {
height: 33%;
width: 51px;
transform: translate(975px, 0);
-webkit-animation: boxes_25 88s infinite;
animation: boxes_25 88s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_26 {
0% {
transform: translate(1939px, 0);
}
50% {
transform: translate(139px, 0);
}
100% {
transform: translate(1939px, 0);
}
}
@keyframes boxes_26 {
0% {
transform: translate(1939px, 0);
}
50% {
transform: translate(139px, 0);
}
100% {
transform: translate(1939px, 0);
}
}
div:nth-child(26) {
height: 64%;
width: 75px;
transform: translate(1764px, 0);
-webkit-animation: boxes_26 85s infinite;
animation: boxes_26 85s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_27 {
0% {
transform: translate(35px, 0);
}
50% {
transform: translate(1063px, 0);
}
100% {
transform: translate(35px, 0);
}
}
@keyframes boxes_27 {
0% {
transform: translate(35px, 0);
}
50% {
transform: translate(1063px, 0);
}
100% {
transform: translate(35px, 0);
}
}
div:nth-child(27) {
height: 50%;
width: 68px;
transform: translate(1286px, 0);
-webkit-animation: boxes_27 66s infinite;
animation: boxes_27 66s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_28 {
0% {
transform: translate(1096px, 0);
}
50% {
transform: translate(1412px, 0);
}
100% {
transform: translate(1096px, 0);
}
}
@keyframes boxes_28 {
0% {
transform: translate(1096px, 0);
}
50% {
transform: translate(1412px, 0);
}
100% {
transform: translate(1096px, 0);
}
}
div:nth-child(28) {
height: 23%;
width: 91px;
transform: translate(532px, 0);
-webkit-animation: boxes_28 78s infinite;
animation: boxes_28 78s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_29 {
0% {
transform: translate(631px, 0);
}
50% {
transform: translate(922px, 0);
}
100% {
transform: translate(631px, 0);
}
}
@keyframes boxes_29 {
0% {
transform: translate(631px, 0);
}
50% {
transform: translate(922px, 0);
}
100% {
transform: translate(631px, 0);
}
}
div:nth-child(29) {
height: 27%;
width: 82px;
transform: translate(1052px, 0);
-webkit-animation: boxes_29 79s infinite;
animation: boxes_29 79s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_30 {
0% {
transform: translate(441px, 0);
}
50% {
transform: translate(263px, 0);
}
100% {
transform: translate(441px, 0);
}
}
@keyframes boxes_30 {
0% {
transform: translate(441px, 0);
}
50% {
transform: translate(263px, 0);
}
100% {
transform: translate(441px, 0);
}
}
div:nth-child(30) {
height: 15%;
width: 76px;
transform: translate(603px, 0);
-webkit-animation: boxes_30 62s infinite;
animation: boxes_30 62s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_31 {
0% {
transform: translate(862px, 0);
}
50% {
transform: translate(752px, 0);
}
100% {
transform: translate(862px, 0);
}
}
@keyframes boxes_31 {
0% {
transform: translate(862px, 0);
}
50% {
transform: translate(752px, 0);
}
100% {
transform: translate(862px, 0);
}
}
div:nth-child(31) {
height: 51%;
width: 63px;
transform: translate(1167px, 0);
-webkit-animation: boxes_31 82s infinite;
animation: boxes_31 82s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_32 {
0% {
transform: translate(648px, 0);
}
50% {
transform: translate(650px, 0);
}
100% {
transform: translate(648px, 0);
}
}
@keyframes boxes_32 {
0% {
transform: translate(648px, 0);
}
50% {
transform: translate(650px, 0);
}
100% {
transform: translate(648px, 0);
}
}
div:nth-child(32) {
height: 45%;
width: 108px;
transform: translate(957px, 0);
-webkit-animation: boxes_32 77s infinite;
animation: boxes_32 77s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_33 {
0% {
transform: translate(703px, 0);
}
50% {
transform: translate(147px, 0);
}
100% {
transform: translate(703px, 0);
}
}
@keyframes boxes_33 {
0% {
transform: translate(703px, 0);
}
50% {
transform: translate(147px, 0);
}
100% {
transform: translate(703px, 0);
}
}
div:nth-child(33) {
height: 59%;
width: 106px;
transform: translate(1724px, 0);
-webkit-animation: boxes_33 59s infinite;
animation: boxes_33 59s infinite;
background: rgba(30, 144, 255, 0.25);
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
}
@-webkit-keyframes boxes_34 {
0% {
transform: translate(707px, 0);
}
50% {
transform: translate(664px, 0);
}
100% {
t.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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