纯css布局实现一个西部牛仔效果
代码语言:html
所属分类:布局界面
代码描述:纯css布局实现一个西部牛仔效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } html, body { box-sizing: inherit; background: #fdf59c; } .cowboy-container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80vmin; height: 80vmin; } .cowboy-head { position: absolute; width: 35vmin; height: 35vmin; left: 50%; transform: translateX(-50%); background: #f4c09a; border-radius: 30px; } .hat { position: absolute; width: 35vmin; height: 15vmin; background: #008792; border-top-left-radius: 30px; border-top-right-radius: 30px; } .hat:after { content: ""; display: block; position: absolute; background: #235558; width: 55vmin; height: 1vmin; top: 14vmin; left: -10vmin; z-index: 2; } .hair { position: absolute; top: 5vmin; left: 8vmin; width: 0; height: 0; border-top: 10vmin solid transparent; border-right: 10vmin solid transparent; border-bottom: 10vmin solid transparent; border-left: 10vmin solid #142f3c; z-index: 1; transform: rotate(-45deg); } .hair:after { content: ""; display: block; position: absolute; top: -2vmin; left: -2vmin; width: 0; height: 0; border-top: 5vmin solid transparent; border-right: 5vmin solid transparent; border-bottom: 5vmin solid transparent; border-left: 5vmin solid #142f3c; z-index: 1; } .left-eye { position: absolute; top: 16.5vm.........完整代码请登录后点击上方下载按钮下载查看
网友评论0