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%);
}

.cartoon div {
  position: absolute;
  box-sizing: border-box;
}

.b {
  border: 1vmin solid black;
}

.r {
  border-radius: 100%;
}

.hb::before,
.ha::after {
  content: "";
  display: block;
  position: absolute;
}

/****/
html, body {
  --primary: #48e;
  --secondary: #ccc;
  background: var(--secondary);
}

.cartoon {
  width: 100vmin;
  height: 100vmin;
  background-size: cover;
  background-position: center cente.........完整代码请登录后点击上方下载按钮下载查看

网友评论0