canvas实现水位上升下降动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas实现水位上升下降动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap'> <style> @import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap"); .backdrop { position: fixed; bottom: 0; left: 0; width: 100%; height: 100%; z-index: -1; display: flex; flex-direction: column; justify-content: flex-end; } .backdrop canvas { width: 100vw; flex: 0 0 60px; transform: translateY(1px); } @keyframes grow { 0% { flex: 0 0 0vh; } 50% { flex: 0 0 90vh; } 100% { flex: 0 0 0vh; } } .backdrop .filler { background: #8ed6ff; flex: 0 0 0vh; animation: grow 16s ease-in-out infinite; } @keyframes wave { 0% { transform: rotate(-2deg) translatex(-2vw); } 25% { transform: rotate(1deg) translatex(2vw); } 50% { transform: rotate(-1deg) translatex(-2vw); } 75% { transform: rotate(2deg) translatex(2vw); } 100% { transform: rotate(-2deg) translatex(-2vw); } } .content { position: fixed; width: 100%; height: 100%; font-family: "Share Tech Mono", monospace; letter-spacing: -3rem; font-size: 20rem; display: flex; justify-content: center; align-items: center; color: rgba(132, 210, 255, 0.5); text-shadow: 0 0 120px rgba(255, 255, 255, 0.8); filter: blur(2px); animation: wave 7s infinite ease-in-out; } </style> </head> <body> <div class="backdrop"> <canvas id="canvas1"></canvas> <div id="filler" class="filler"></div> </div> <div class="content&qu.........完整代码请登录后点击上方下载按钮下载查看
网友评论0