纯css实现划船效果
代码语言:html
所属分类:布局界面
代码描述:纯css实现划船效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { background-color: #3e9d8c; } .container { display: flex; justify-content: center; align-items: center; height: 100%; transform: rotateZ(20deg); } .boat { height: 450px; width: 200px; background-color: #f88e34; border-top-left-radius: 70% 100%; border-top-right-radius: 70% 100%; border-bottom-left-radius: 10% 30%; border-bottom-right-radius: 10% 30%; box-shadow: 30px 30px 10px black; position: relative; display: flex; align-items: center; justify-content: center; box-shadow: inset 10px 0 #f8c299, inset -10px 0 #f8c299, 30px 30px 10px #235e51; } .boat::before { content: ""; position: absolute; background-color: orange; width: 10px; height: 20px; left: 4px; top: 51%; z-index: 999; box-shadow: 182px 0 orange; } .inner-body { height: 80%; width: 85%; background-color: #f46443; border-top-left-radius: 70% 85%; border-top-right-radius: 70% 85%; border-bottom-left-radius: 10% 30%; border-bottom-right-radius: 10% 30%; position: relative; display: flex; justify-content: center; overflow: hidden; box-shadow: inset 16px 5px 10px 5px #a93d25; } .inner-body::before { --color: #f88e34; content: ""; position: absolute; background-color: #f88e34; width: 100%; height: 20px; box-shadow: 0 50px 0 -7px var(--color), 0 90px 0 -7px var(--color), -10px 130px 0 -7px var(--color), 10px 130px 0 -7px var(--color), 0 190px 0 17px var(--color), -10px 260px 0 -7px var(--color), 10px 260px 0 -7px var(--color), -10px 300px 0 -7px var(--color), 10px 300px 0 -7px var(--color); } .human { display: flex; justify-content: center; align-self: center; z-index: 1; position: relative; top: 40px; } .head { width: 50px; height: 50px; border-radius: 100vh; background-color: black; position: absolute; top: -20px; z-index: 2; } .body { width: 100px; height: 50px; background-color: #5adabe; border-radius: 50% 50% 60% 60% / 50% 50% 60% 60%; position: relative; z-index: 1; } .body::after { content: ""; position: absolute; width: 50%; height: 30px; transform: rotate(45deg) translate(-14px, 14px); border-radius: 50px; background-color: #5adabe; box-shadow: -30px 0 0 -5px #fee5c5; } .body::before { content: ""; position: absolute; width: 50%; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0