最近几天一直在搞微信小程序,猫贝同学建议用两个小球的loading动画,于是一阵折腾。
纯CSS动画,直接上代码。
<!DOCTYPE html> <html> <head> <title>球</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="blocks"> <div class="block red"></div> <div class="block blue"></div> </div> </body> </html>
.blocks { height: 100vh; display: flex; align-items: center; position: relative; justify-content: center; } .block { height: 15px; width: 15px; border-radius: 50%; -webkit-transform: translateX(0); transform: translateX(0); mix-blend-mode: lighten; } .red { background: #FA167C; -webkit-animation: attract-orange 700ms cubic-bezier(0.3, 0.5, 0.4, 0.9) infinite alternate-reverse; animation: attract-orange 700ms cubic-bezier(0.3, 0.5, 0.4, 0.9) infinite alternate-reverse; } .blue { background: #0A0BF5; -webkit-animation: attract-blue 700ms cubic-bezier(0.3, 0.5, 0.4, 0.9) infinite alternate-reverse; animation: attract-blue 700ms cubic-bezier(0.3, 0.5, 0.4, 0.9) infinite alternate-reverse; } @-webkit-keyframes attract-orange { to { -webkit-transform: translateX(calc(20px + calc(20px / 4))); transform: translateX(calc(20px + calc(20px / 4))); } } @keyframes attract-orange { to { -webkit-transform: translateX(calc(20px + calc(20px / 4))); transform: translateX(calc(20px + calc(20px / 4))); } } @-webkit-keyframes attract-blue { to { -webkit-transform: translateX(calc(20px * -1 - calc(20px / 4))); transform: translateX(calc(20px * -1 - calc(20px / 4))); } } @keyframes attract-blue { to { -webkit-transform: translateX(calc(20px * -1 - calc(20px / 4))); transform: translateX(calc(20px * -1 - calc(20px / 4))); } }
本文由隔壁老李于2022-03-26发表在极致时空,如有疑问,请联系我们。
本文链接:https://www.jz52.com/post/508.html