css实现一个方块猫效果
代码语言:html
所属分类:布局界面
代码描述:css实现一个方块猫效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; width: 100vw; margin: -8px; background: pink; } h1{ position: relative; text-align: center; color: #353535; margin-bottom: 100px; } .box1{ position: relative; width:100px; height:70px; background:red; } .box2{ position: relative; width:200px; height:70px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .box3{ position: relative; width:300px; height:70px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .cat1{ position: relative; width:100px; height:70px; background:#000; display: inline-block; } .cat1:before,.cat1:after{ content: ''; position: absolute; height: 0px; width: 0px; border-right: 15px solid transparent; border-left: 15px solid transparent; border-bottom: 30px solid #000; z-index: 2; } .cat1:before{ bottom: 70px; left: 5px; } .cat1:after{ bottom: 70px; right: 5px; } .eye{ position: relative; width:10px; height:10px; background:#fff; border-radius: 100px; top: 30px; left: 20px; } .eye:before{ content: ''; position: absolute; width:10px; height:10px; background:#fff; border-radius: 100px; left: 50px; } .mouth{ position: relative; width:8px; height:5px; background:#fff; border-radius: 100px; top: 30px; left: 46px; } .mouth:before, .mouth:after{ content: ''; position: absolute; width:20px; height:20px; border-bottom: solid #fff; border-radius: 100px; bottom: -9px; } .mouth:before{ left: -15px; } .mouth:after{ right: -15px; } .cat2{ position: relative; width:100px; height:70px; background:#fff; z-index: 1; } .cat2:before, .cat2:after{ content: ''; position: absolute; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0