css螺旋式摆尾动画效果代码
代码语言:html
所属分类:动画
代码描述:css螺旋式摆尾动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .container { position: absolute; inset: 0; background: #0ecabb; overflow: hidden; } .container .leaf { height: 90%; width: 90%; transform-origin: 50% 100%; background: #fefefe; border-radius: 100px; animation-name: swing; animation-duration: 3s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } .container .leaf.parent { height: 50px; width: 20px; transform: translate(-50%, -50%); left: 50%; top: 80%; position: absolute; } @keyframes swing { from { transform: translateY(-90%) rotate(-50deg); } to { transform: translateY(-90%) rotate(50deg); } } </style> </head> <body translate="no"> <div class="container"> <div class="leaf parent"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> <div class="leaf"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0