css实现鲸鱼吐气动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现鲸鱼吐气动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { height: 100vh; width: 100vw; background: #f2f2f2; display: flex; align-items: center; justify-content: center; overflow: hidden; } .container { position: relative; display: flex; align-items: center; justify-content: center; border-radius: 50px; background: linear-gradient(#99ccff, #eee); box-shadow: 7px 7px 19px #d3d3d3, -7px -7px 19px #ffffff; height: 62vmin; width: 70vmin; } .body::after, .tail, .hand, .eye, .blush, .water, .puff1 .puff2, .puff3 { animation: waves 3s infinite forwards; } .body { position: relative; } .body::after { position: absolute; content: ''; background: #89CFF0; height: 25vmin; width: 33vmin; border-bottom-left-radius: 150px; border-top-left-radius: 300px; border-bottom-right-radius: 100px; border-top-right-radius: 700px; top: 18vmin; left: -13vmin; z-index: 1; } .tail { position: relative; top: 35vmin; left:18vmin; background-color: #89CFF0; width: 10vmin; height: 8vmin; border-radius: 10% 80%; border-top-left-radius: 0; z-index: 1; } .tail::before { content: ''; position: absolute; background-color: #89CFF0; width: 10vmin; height: 8vmin; top: -5vmin; left: -1vmin; border-radius: 80% 10%; margin: 0 0 -130px 0; border-bottom-left-radius: 0; } .hand { position: relative; top: 30vmin; left: -5vmin; background-color: #89CFF0; width: 10vmin; height: 8vmin; border-radius: 10% 80%; border-top-left-radius: 0; } .eye { z-index: 2; position: relative; top: 18vmin; left: -10vmin; background-color: white; width: 4vmin; height: 4vmin; border-radius: 50%; } .eye::before { content: ''; position: absolute; background-color: black; width: 2vmin; height: 2vmin; top: 2vmin; left: 1vmin; border-radius: 50%; } .blush { position: relative; top: 18vmin; left:-5vmin; background-color: pink; width: 3vmin; height: 3vmin; border-radius: 50%; z-index: 2; } .water { border-top: 7vmin solid #004466; border-left: 4vmin solid transparent; opacity:0.7; border-right: 4vmin solid transparent; height: 0; width: 3vmin; border-radius: 14px; top: -10vmin; position: relative; lef.........完整代码请登录后点击上方下载按钮下载查看
网友评论0