css布局实现鲸鱼效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现鲸鱼效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .cartoon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60vmin; height: 60vmin; } .cartoon div { position: absolute; box-sizing: border-box; } .b { border: 1vmin solid; } .r { border-radius: 100%; } .hb::before, .ha::after { content: ""; display: block; position: absolute; } /****/ html, body { --dark: #346; --light: #6ce; --white: #def; background: var(--light); overflow: hidden; } .body { width: 80%; height: 40%; top: 10%; left: 0; border-radius: 0 10% 50% 0 / 100%; box-shadow: 4.6vmin 6vmin 0 4vmin var(--dark), 4vmin 13vmin 0 9.5vmin var(--dark); clip-path: polygon(50% -200%, 200% -200%, 200% 200%, 50% 200%) } .body::before, .body::after { width: 16vmin; height: 10vmin; background: var(--dark); border-radius: 0 14vmin 0 14vmin; top: -3vmin; right: -2.5vmin; transform: rotate(-10deg); } .body::before { border-radius: 14vmin 0 14vmin 0; right: -17vmin; top: -5.5vmin; } .mouth { width: 92.5%; height: 46%; border-radius: 20vmin 0 100vmin 100vmin; top: 50%; left: 0; background: var(--dark); overflow: hidden; } .mouth::before { width: 75%; height: 200%; background: var(--white); border-radius: 0 40% 50% 0; top: 20%; left: -30%; border: 0.5vmin solid var(--light); box-sizing: border-box; } .mouth::after { width: 80%; left: 10%; height: 30%; border-radius: 100%; top: 55%; box-shadow: 0 0.5vmin var.........完整代码请登录后点击上方下载按钮下载查看
网友评论0