lodash实现一个螺旋波动方块升降图动画效果代码
代码语言:html
所属分类:动画
代码描述:lodash实现一个螺旋波动方块升降图动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #012A4A; } .wrapper { position: absolute; display: grid; grid-template-columns: repeat(9, 1fr); top: 40%; left: 50%; transform: translate(-50%, -50%) rotateX(45deg) rotateZ(45deg); transform-style: preserve-3d; } .shape { position: relative; background: white; width: 30px; height: 30px; padding: 8px; transition: 0.5s; border-radius: 5px; background: #ef476f; border: 2px solid #ffb703; box-shadow: 200px 200px 20px rgba(255, 249, 214, 0.1); animation: bump 1.5s ease-in-out infinite; } @keyframes bump { 50% { transform: translateZ(24px); } } </style> </head> <body > <div class="wrapper"> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div cl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0