前端花式转圈圈一些css小样式

前端花式转圈圈一些css小样式,第1张

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @keyframes k-loadingA{ 50% { height:40px; /* background: tomato; */ } 100%{ height: 15px; /* background: skyblue; */ } } @keyframes k-loadingB{ 50% { width:40px; /* background: tomato; */ } 100%{ width: 15px; /* background: skyblue; */ } } @keyframes k-loadingC{ 50% { transform: translateY(-10px); } 100%{ transform: translateY(0px); } } @keyframes k-loadingD{ 0% { transform: translateY(0px); opacity: 1; } 30%{ transform: translateY(0px); opacity: .3; } 50%{ transform: translateY(-10px); opacity: .8; } 70%{ transform: translateY(3px); opacity: .8; } 85%{ transform: translateY(-3px); } 100%{ transform: translateY(0px); opacity: 1; } } @keyframes k-loadingE{ 0%{ transform: translateX(-200px); opacity: 0; } 50%{ transform: translateX(0px); opacity: .8; } 100%{ transform: translateX(200px); opacity: 0; } } @keyframes k-loadingF{ 0%{ transform: rotate(120deg); } 50%{ transform: rotate(240deg); } 100%{ transform: rotate(360deg); } } @keyframes k-loadingG{ 50%{ transform: rotate(180deg); } 100%{ transform: rotate(360deg); } } @keyframes k-loadingI{ 100%{ transform: rotate(360deg); } } @-webkit-keyframes circle { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading_a{ width: 100px; height: 100px; background: pink; /* display: flex; justify-content: space-around; align-items: center; */ text-align: center; } .loading_f,.loading_g,.loading_h,.loading_i{ width: 150px; height: 150px; text-align: center; background: pink; padding-top: 20px; margin-top: 20px; } .loading_b,.loading_c,.loading_d,.loading_e{ width: 400px; height: 100px; background: hotpink; text-align: center; margin-top: 30px; overflow: hidden; } .loader { width: 400px; height: 100px; text-align: center; background: #F44336; margin-top: 30px; padding-top: 20px; overflow: hidden; } .k_line{ display: inline-block; width: 15px; height: 15px; border-radius: 15px; background: skyblue; margin-top: 30px; } .k_lineA_1{ animation: k-loadingA 1.2s 0s infinite; } .k_lineA_2{ animation: k-loadingA 1.2s 0.3s infinite; } .k_lineA_3{ animation: k-loadingA 1.2s 0.6s infinite; } .k_lineA_4{ animation: k-loadingA 1.2s 0.9s infinite; } .k_lineB_1{ animation: k-loadingB 1.5s 0s infinite; } .k_lineB_2{ animation: k-loadingB 1.5s 0.3s infinite; } .k_lineB_3{ animation: k-loadingB 1.5s 0.6s infinite; } .k_lineB_4{ animation: k-loadingB 1.5s 0.9s infinite; } .k_lineB_5{ animation: k-loadingB 1.5s 1.2s infinite; } .k_lineC_1{ animation: k-loadingC 0.5s 0.1s infinite; } .k_lineC_2{ animation: k-loadingC 0.5s 0.1s infinite; } .k_lineC_3{ animation: k-loadingC 0.5s 0.2s infinite; } .k_lineC_4{ animation: k-loadingC 0.5s 0.3s infinite; } .k_lineC_5{ animation: k-loadingC 0.5s 0.4s infinite; } .k_lineD_1{ animation: k-loadingD 1s 0.5s infinite; } .k_lineD_2{ animation: k-loadingD 1s 0.6s infinite; } .k_lineD_3{ animation: k-loadingD 1s 0.7s infinite; } .k_lineD_4{ animation: k-loadingD 1s 0.8s infinite; } .k_lineD_5{ animation: k-loadingD 1s 0.9s infinite; } .k_lineE_1{ opacity: 0; animation: k-loadingE 2s 1.35s infinite; } .k_lineE_2{ opacity: 0; animation: k-loadingE 2s 1.3s infinite; } .k_lineE_3{ opacity: 0; animation: k-loadingE 2s 1.25s infinite; } .k_lineE_4{ opacity: 0; animation: k-loadingE 2s 1.2s infinite; } .k_lineE_5{ opacity: 0; animation: k-loadingE 2s 1.15s infinite; } .k_ring_1{ width: 15px; height: 15px; margin: 0 auto; padding: 15px; border: 6px dashed #000000; border-radius: 50%; animation:k-loadingF 1s 0s linear infinite; } .k_ring_2{ width: 50px; height: 50px; position: relative; border:4px solid purple; border-radius: 50%; animation:k-loadingG 1s 0s linear infinite; } .ring2_content1{ position:absolute; top:-4px; left: -1px; width: 16px; height:16px; border-radius: 100%; background: #F44336; } .ring2_content2{ position:absolute; top:-4px; right: -1px; width: 16px; height:16px; border-radius: 100%; background: green; } .ring2_content3{ position:absolute; bottom:-4px; left: -1px; width: 16px; height:16px; border-radius: 100%; background: yellowgreen; } .ring2_content4{ position:absolute; bottom:-4px; right: -1px; width: 16px; height:16px; border-radius: 100%; background: red; } .k_ring_i{ display: inline-block; margin-bottom: 1.5rem; height: 4rem; width: 4rem; border: 0.4rem solid transparent; border-top-color: blue; border-left-color: blue; border-bottom-color: blue; animation: circle 1.5s infinite linear; -webkit-animation: circle 1.5s infinite linear; /* Safari 和 Chrome */ border-radius: 50%; } .dot { width: 24px; height: 24px; background: rgb(5, 189, 245); border-radius: 100%; display: inline-block; animation: slide 1s infinite; } .dot:nth-child(1) { animation-delay: 0.1s; background: #5ff09b; } .dot:nth-child(2) { animation-delay: 0.2s; background: #10f4fc; } .dot:nth-child(3) { animation-delay: 0.3s; background: pink; } .dot:nth-child(4) { animation-delay: 0.4s; background: #b5f505; } .dot:nth-child(5) { animation-delay: 0.5s; background: #8f85ee; } @keyframes slide { 0% { transform: scale(1); } 50% { opacity: 0.3; transform: scale(2.5); } 100% { transform: scale(1); } } .loader1{ width: 150px; height: 150px; text-align: center; background: goldenrod; margin-top: 30px; padding-top: 50px; overflow: hidden; } @keyframes circlechange2 { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } @keyframes circlechange1 { 0% { transform: scale(1.2); } 50% { transform: scale(1); } 100% { transform: scale(1.2); } } .bigCircle{ width: 50px; height: 50px; background: rgba(255,255,255,0.5); padding: 20px; border-radius: 50%; margin: 0 auto; animation: circlechange1 1s infinite; } .smallCircle{ width: 30px; height: 30px; background: #fff; opacity: .7; z-index: 2; border-radius: 50%; margin: 0 auto; margin-top: 10px; animation: circlechange2 1s infinite; } @keyframes circleleft { 0% { transform: rotate(360deg); } 100% { transform: scale(0deg); } } .loader2{ width: 150px; height: 150px; text-align: center; background: goldenrod; margin-top: 30px; padding-top: 50px; overflow: hidden; } .loader2_fu{ position: relative; width: 100px; height:100px; border-radius: 50%; border:6px solid rgba(255,255,255,0.5); border-left-color:rgba(255,255,255,1); margin: 0 auto; animation: circleleft 1s linear infinite; } @keyframes sijiao1 { 0%{ transform: translate3d(0,0,0); } 50%{ transform: translate3d(-200%,-200%,0); } 100%{ transform: translate3d(0,0,0); } } @keyframes sijiao2 { 0%{ transform: translate3d(0,0,0); } 50%{ transform: translate3d(200%,-200%,0); } 100%{ transform: translate3d(0,0,0); } } @keyframes sijiao3 { 0%{ transform: translate3d(0,0,0); } 50%{ transform: translate3d(-200%,200%,0); } 100%{ transform: translate3d(0,0,0); } } @keyframes sijiao4 { 0%{ transform: translate3d(0,0,0); } 50%{ transform: translate3d(200%,200%,0); } 100%{ transform: translate3d(0,0,0); } } .loader3{ width: 200px; height: 115px; text-align: center; background: rgb(32, 181, 218); margin-top: 30px; padding-top: 85px; } .loader3_fu{ margin: 0 auto; width: 60px; height: 60px; text-align: center; position: relative; } .sijiao{ position: absolute; width: 30px; height:30px; border-radius: 50%; } .jiao1{ background: rgb(251, 255, 0); top: -25%; left: -25%; animation: sijiao4 1.5s infinite; } .jiao2{ background: rgb(255, 102, 0); bottom: -25%; left: -25%; animation: sijiao2 1.5s infinite; } .jiao3{ background: rgb(0, 255, 0); right:-25%; top: -25%; animation: sijiao3 1.5s infinite; } .jiao4{ background: rgb(212, 0, 255); bottom: -25%; right: -25%; animation: sijiao1 1.5s infinite; } </style> </head> <body> <div > A <div ></div> <div ></div> <div ></div> <div ></div> </div> <div > B <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> </div> <div > C <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> </div> <div > D <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> </div> <div > <div > <div ></div> <div ></div> <div ></div> <div ></div> </div> </div> <div > E <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> </div> <div > F <div ></div> </div> <div > G <div > <div > </div> </div> </div> <div > H <div > <div > </div> <div > </div> <div > </div> <div > </div> </div> </div> <div > <div > </div> </div> <div > I <div ></div> </div> <div > dot <div ></div> <div ></div> <div ></div> <div ></div> <div ></div> </div> <div > <div > <div > </div> </div> </div> </body> </html>

前端花式转圈圈一些css小样式

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/1006770.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-22
下一篇 2022-05-22

发表评论

登录后才能评论

评论列表(0条)

保存