div+css实现水波液体文字上下波动水平面动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现水波液体文字上下波动水平面动画效果代码
代码标签: div css 水波 液体 文字 上下 波动 水平面 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css"> <style> .container { max-width: 960px } body { background-color: white; } .widthset { width: 16.5% } .heading-style { font-family: 'Righteous',cursive; font-size: 205px; font-weight: bolder; -webkit-text-stroke: 2px rgba(6,188,209,0.2); background: #fff; mix-blend-mode: screen; padding-top: 190px } @media(min-width: 1200px) .container,.container-lg,.container-md,.container-sm,.container-xl { max-width:1140px } @media(min-width: 992px) .container,.container-lg,.container-md,.container-sm { max-width:960px } @media(min-width: 768px) .container,.container-md,.container-sm { max-width:720px } @media(min-width: 576px) .container,.container-sm { max-width:540px } @media(min-width: 1200px) .container { max-width:1140px } @media(min-width: 992px) .container { max-width:960px } @media(min-width: 768px) .container { max-width:720px } @media(min-width: 576px) .container { max-width:540px } .shadow { box-shadow: 0 18px 39.1px 6.9px rgba(224,241,255,0.34)!important } .card { border: 0 } .mt-15 { margin-top: 15% } .progress-wrapper { height: 240px; overflow: hidden } .wave { position: absolute; width: 100%; height: 100% } .card-body { -ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 1px; padding: 1.25rem } .card-title { margin-bottom: .75rem } .list-unstyled { padding-left: 0; list-style: none } .card { position: relative; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: .25rem; margin-bottom: 20px } .wave::before,.wave::after { content: ""; position: absolute; width: 470px; height: 390px; bottom: 0; left: 55%; background-color: rgba(255,255,255,0.18); border-radius: 70%; -webkit-transform: translateX(-50%) rotate(0); transform: translateX(-50%) rotate(0); -webkit-animation: rotate 6s linear infinite; animation: rotate 6s linear infinite; z-index: 10 } .wave::after { border-radius: 30%; background-color: rgba(255,255,255,0.9); -webkit-transform: translateX(-50%) rotate(0); transform: translateX(-50%) rotate(0); -webkit-animation: rotate 10s linear -5s infinite; animation: rotate 10s linear -5s infinite; z-index: 20 } @keyframes rotate { 50% { transform: translateX(-50%) rotate(180deg) } 100% { transform: translateX(-50%) rotate(360deg) } } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0