css布局实现一个日本武士效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现一个日本武士效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { font-family: sans-serif; margin: 0; padding: 0; } #container { position: relative; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #fff; } #container .circle-bg { width: 450px; height: 450px; position: absolute; background-color: #e52015; border-radius: 100%; top: 50px; } #container .samurai-jack { width: 270px; height: 510px; display: flex; align-items: center; position: relative; flex-direction: column; border-bottom: 5px solid #e52015; } #container .samurai-jack .hair-top { width: 0; height: 0; position: absolute; left: 0; right: 0; top: -20px; margin: 0 auto; border-left: 8px solid transparent; border-right: 14px solid transparent; border-top: 25px solid black; z-index: 9; } #container .samurai-jack .ear-left, #container .samurai-jack .ear-right { position: absolute; top: 25px; width: 25px; height: 27px; border-radius: 35px; background-color: #fefeb9; } #container .samurai-jack .ear-right { left: 92px; } #container .samurai-jack .ear-left { right: 92px; } #container .samurai-jack .head { position: relative; background: #fefeb9; width: 70px; height: 100px; z-index: 9; border-radius: 0 0 2em 2em/6em 6em; box-shadow: 0px 2px 3px 3px rgba(0, 0, 0, 0.25); overflow: hidden; } #container .samurai-jack .head .hair { width: 0; height: 0; position: relative; border-left: 35px solid transparent; border-right: 35px solid transparent; border-top: 15px solid black; } #container .samurai-jack .head .hair::after, #container .samurai-jack .head .hair::before { content: ""; position: absolute; top: -40px; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 40px solid transparent; } #container .samurai-jack .head .hair::after { left: -35px; border-left: 11px solid black; } #container .samurai-jack .head .hair::before { right: -35px; border-right: 11px solid black; } #container .samurai-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0