css实现线条弹射水面涟漪动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现线条弹射水面涟漪动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { display:flex; align-items:center; position:relative; background:linear-gradient(to bottom right,#070630 0%,#060454 100%); min-height:100vh; } .animation-container { display:block; position:relative; width:800px; max-width:100%; margin:0 auto; } .animation-container .lightning-container { position:absolute; top:50%; left:0; display:flex; -webkit-transform:translateY(-50%); transform:translateY(-50%); } .animation-container .lightning-container .lightning { position:absolute; display:block; height:12px; width:12px; border-radius:12px; -webkit-transform-origin:6px 6px; transform-origin:6px 6px; -webkit-animation-name:woosh; animation-name:woosh; -webkit-animation-duration:1.5s; animation-duration:1.5s; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; -webkit-animation-timing-function:cubic-bezier(0.445,0.05,0.55,0.95); animation-timing-function:cubic-bezier(0.445,0.05,0.55,0.95); -webkit-animation-direction:alternate; animation-direction:alternate; } .animation-container .lightning-container .lightning.white { background-color:white; box-shadow:0px 50px 50px 0px rgba(255,255,255,0.3); } .animation-container .lightning-container .lightning.red { background-color:#fc7171; box-shadow:0px 50px 50px 0px rgba(252,113,113,0.3); -webkit-animation-delay:0.2s; animation-delay:0.2s; } .animation-container .boom-container { position:absolute; display:flex; width:80px; height:80px; text-align:center; align-items:center; -webkit-transform:translateY(-50%); transform:translateY(-50%); left:200px; top:-145px; } .animation-container .boom-container .shape { display:inline-block; position:relative; opacity:0; -webkit-transform-origin:center center; transform-origin:center center; } .animation-container .boom-container .shape.triangle { width:0; height:0; border-style:solid; -webkit-transform-origin:50% 80%; transform-origin:50% 80%; -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-timing-function:ease-out; animation-timing-function:ease-out; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; margin-left:-15px; border-width:0 2.5px 5px 2.5px; border-color:transparent transparent #42e599 transparent; -webkit-animation-name:boom-triangle; animation-name:boom-triangle; } .animation-container .boom-container .shape.triangle.big { margin-left:-25px; border-width:0 5px 10px 5px; border-color:transparent transparent #fade28 transparent; -webkit-animation-name:boom-triangle-big; animation-name:boom-triangle-big; } .animation-container .boom-container .shape.disc { width:8px; height:8px; border-radius:100%; background-color:#d15ff4; -webkit-animation-name:boom-disc; animation-name:boom-disc; -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-timing-function:ease-out; animation-timing-function:ease-out; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; } .animation-container .boom-container .shape.circle { width:20px; height:20px; -webkit-animation-name:boom-circle; animation-name:boom-circle; -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-timing-function:ease-out; animation-timing-function:ease-out; -webkit-animation-iteration-count:infinite; animation-iteration-count:infinite; border-radius:100%; margin-left:-30px; } .animation-container .boom-container .shape.circle.white { border:1px solid white; } .animation-container .boom-container .shape.circle.big { width:40px; height:40px; margin-left:0px; } .animation-container .boom-container .shape.circle.big.white { border:2px solid white; } .animation-container .boom-container .shape:after { background-color:rgba(178,215,232,0.2); } .animation-container .boom-container .shape.triangle,.animation-container .boom-container .shape.circle,.animation-container .boom-container .shape.circle.big,.animation-container .boom-container .shape.disc { -webkit-animation-delay:.38s; animation-delay:.38s; -webkit-animation-duration:3s; animation-duration:3s; } .animation-container .boom-container .shape.circle { -webkit-animation-delay:0.6s; animation-delay:0.6s; } .animation-container .boom-container.second { left:485px; top:155px; } .animation-container .boom-container.second .shape.triangle,.animation-container .boom-container.second .shape.circle,.animation-container .boom-container.second .shape.circle.big,.animation-container .boom-container.second .shape.disc { -webkit-animation-delay:1.9s; animation-dela.........完整代码请登录后点击上方下载按钮下载查看
网友评论0