鱼跃农门涟漪动画效果
代码语言:html
所属分类:动画
代码描述:主要通过css动画来模拟鱼跃起产生的涟漪效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html,body { height: 100%; margin: 0; } body { min-height: 300px; font-family: arial,sans-serif; font-size: 16px; background-color: #0066FF; overflow: hidden; background-size: cover; } h1 { margin: 0; font-weight: normal; font-size: 24px; line-height: 24px; } .fish { width: 200px; height: 200px; margin: auto; position: absolute; transform-origin: left top; } .fish>div { width: 100%; height: 100%; } .real,.reflex { width: 100%; height: 50%; text-align: center; overflow: hidden; } .reflex { opacity: .3; } .real>div,.reflex>div { height: 100%; display: inline-flex; font-size: 24px; line-height: 24px; transform-origin: bottom center; align-items: flex-start; animation-name: jump; animation-duration: 1s; animation-fill-mode: forwards; animation-timing-function: linear; } .reflex>div { transform-origin: top center; align-items: flex-end; animation-direction: reverse; } .reflex>div>div { transform: scale(1,-1) } .waveRight,.waveLeft { position: absolute; width: 20px; height: 20px; top: 45%; left: 175px; z-index: 1; animation-name: wave; animation-duration: 2s; animation-fill-mode: forwards; animation-timing-function: ease-out; transform: scale(0); border-radius: 50%; border: 1px solid black; } .waveLeft { left: 3px; } @keyframes jump { 0% { transform: rotate(100deg); } 100% { transform: rotate(-100deg); } } @keyframes wave { 0% { transform: scale(.8,.2); opacity: 1 } 100% { transform: scale(8,2); opacity: 0 } } #seeBackgrounImage { position: absolute; z-index: 1; cursor: pointer; text-decoration: underline; color: #002762; } .noBG,.yesBG { display: inline-block; font-size: 24px; vertical-align: middle.........完整代码请登录后点击上方下载按钮下载查看
网友评论0